<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 4.9. Tabular data</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="links.html#links"><span class="secno">4.8</span> <span class="content">Links</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="sec-forms.html#sec-forms"><span class="secno">4.10</span> <span class="content"><span>Forms</span></span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
       <a href="tabular-data.html#tabular-data"><span class="secno">4.9</span> <span class="content">Tabular data</span></a>
       <ol class="toc">
        <li>
         <a href="tabular-data.html#the-table-element"><span class="secno">4.9.1</span> <span class="content">The <span><code>table</code></span> element</span></a>
         <ol class="toc">
          <li><a href="tabular-data.html#sec-techniques-for-describing-tables"><span class="secno">4.9.1.1</span> <span class="content"><span>Techniques for describing tables</span></span></a>
          </li><li><a href="tabular-data.html#techniques-for-table-design"><span class="secno">4.9.1.2</span> <span class="content">Techniques for table design</span></a>
         </li></ol>
        </li><li><a href="tabular-data.html#the-caption-element"><span class="secno">4.9.2</span> <span class="content">The <span><code>caption</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-colgroup-element"><span class="secno">4.9.3</span> <span class="content">The <span><code>colgroup</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-col-element"><span class="secno">4.9.4</span> <span class="content">The <span><code>col</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-tbody-element"><span class="secno">4.9.5</span> <span class="content">The <span><code>tbody</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-thead-element"><span class="secno">4.9.6</span> <span class="content">The <span><code>thead</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-tfoot-element"><span class="secno">4.9.7</span> <span class="content">The <span><code>tfoot</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-tr-element"><span class="secno">4.9.8</span> <span class="content">The <span><code>tr</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-td-element"><span class="secno">4.9.9</span> <span class="content">The <span><code>td</code></span> element</span></a>
        </li><li><a href="tabular-data.html#the-th-element"><span class="secno">4.9.10</span> <span class="content">The <span><code>th</code></span> element</span></a>
        </li><li><a href="tabular-data.html#attributes-common-to-td-and-th-elements"><span class="secno">4.9.11</span> <span class="content">Attributes common to <code>td</code> and <code><span>th</span></code> elements</span></a>
        </li><li>
         <a href="tabular-data.html#tabular-data-processing-model"><span class="secno">4.9.12</span> <span class="content">Processing model</span></a>
         <ol class="toc">
          <li><a href="tabular-data.html#forming-a-table"><span class="secno">4.9.12.1</span> <span class="content">Forming a table</span></a>
          </li><li><a href="tabular-data.html#forming-relationships-between-data-cells-and-header-cells"><span class="secno">4.9.12.2</span> <span class="content">Forming relationships between data cells and header cells</span></a>
         </li></ol>
        </li><li><a href="tabular-data.html#examples"><span class="secno">4.9.13</span> <span class="content">Examples</span></a>
       </li></ol>
      </li></ol>
  </nav><main><section>
     <h3 class="heading settled" data-level="4.9" id="tabular-data"><span class="secno">4.9. </span><span class="content">Tabular data</span><a class="self-link" href="tabular-data.html#tabular-data"></a></h3>
     <h4 class="heading settled" data-level="4.9.1" id="the-table-element"><span class="secno">4.9.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-table"><code>table</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-table-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-77">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-106">Flow content</a>.
      </dd><dd><a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-53">Palpable content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-76">Contexts in which this element can be used</a>:
      </dt><dd>Where <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-107">flow content</a> is expected.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-79">Content model</a>:
      </dt><dd>In this order: optionally a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-1">caption</a></code> element, followed by zero or more <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-1">colgroup</a></code> elements, followed optionally by a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-1">thead</a></code> element, followed by
    either zero or more <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-1">tbody</a></code> elements or one or more <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-2">tr</a></code> elements, followed
    optionally by a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-1">tfoot</a></code> element, optionally intermixed with one or more <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-7">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-76">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-77">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-77">Global attributes</a>
      </dd><dd><code>border</code>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-78">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-76">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="interface" data-export="" id="htmltableelement-htmltableelement">HTMLTableElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-76">HTMLElement</a> {
  <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablecaptionelement-htmltablecaptionelement" id="ref-for-htmltablecaptionelement-htmltablecaptionelement-1">HTMLTableCaptionElement</a>? <a class="nv idl-code" data-link-type="attribute" data-type="HTMLTableCaptionElement?" href="tabular-data.html#dom-htmltableelement-caption" id="ref-for-dom-htmltableelement-caption-1">caption</a>;
  <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablecaptionelement-htmltablecaptionelement" id="ref-for-htmltablecaptionelement-htmltablecaptionelement-2">HTMLTableCaptionElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-createcaption" id="ref-for-dom-htmltableelement-createcaption-1">createCaption</a>();
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-deletecaption" id="ref-for-dom-htmltableelement-deletecaption-1">deleteCaption</a>();
  <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablesectionelement-htmltablesectionelement" id="ref-for-htmltablesectionelement-htmltablesectionelement-1">HTMLTableSectionElement</a>? <a class="nv idl-code" data-link-type="attribute" data-type="HTMLTableSectionElement?" href="tabular-data.html#dom-htmltableelement-thead" id="ref-for-dom-htmltableelement-thead-1">tHead</a>;
  <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablesectionelement-htmltablesectionelement" id="ref-for-htmltablesectionelement-htmltablesectionelement-2">HTMLTableSectionElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-createthead" id="ref-for-dom-htmltableelement-createthead-1">createTHead</a>();
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-deletethead" id="ref-for-dom-htmltableelement-deletethead-1">deleteTHead</a>();
  <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablesectionelement-htmltablesectionelement" id="ref-for-htmltablesectionelement-htmltablesectionelement-3">HTMLTableSectionElement</a>? <a class="nv idl-code" data-link-type="attribute" data-type="HTMLTableSectionElement?" href="tabular-data.html#dom-htmltableelement-tfoot" id="ref-for-dom-htmltableelement-tfoot-1">tFoot</a>;
  <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablesectionelement-htmltablesectionelement" id="ref-for-htmltablesectionelement-htmltablesectionelement-4">HTMLTableSectionElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-createtfoot" id="ref-for-dom-htmltableelement-createtfoot-1">createTFoot</a>();
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-deletetfoot" id="ref-for-dom-htmltableelement-deletetfoot-1">deleteTFoot</a>();
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="tabular-data.html#dom-htmltableelement-tbodies" id="ref-for-dom-htmltableelement-tbodies-1">tBodies</a>;
  <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablesectionelement-htmltablesectionelement" id="ref-for-htmltablesectionelement-htmltablesectionelement-5">HTMLTableSectionElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-createtbody" id="ref-for-dom-htmltableelement-createtbody-1">createTBody</a>();
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="tabular-data.html#dom-htmltableelement-rows" id="ref-for-dom-htmltableelement-rows-1">rows</a>;
  <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablerowelement-htmltablerowelement" id="ref-for-htmltablerowelement-htmltablerowelement-1">HTMLTableRowElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-insertrow" id="ref-for-dom-htmltableelement-insertrow-1">insertRow</a>(<span class="kt">optional</span> <span class="kt">long</span> <dfn class="nv idl-code" data-dfn-for="HTMLTableElement/insertRow(index), HTMLTableElement/insertRow()" data-dfn-type="argument" data-export="" id="dom-htmltableelement-insertrow-index-index">index<a class="self-link" href="tabular-data.html#dom-htmltableelement-insertrow-index-index"></a></dfn> = -1);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltableelement-deleterow" id="ref-for-dom-htmltableelement-deleterow-1">deleteRow</a>(<span class="kt">long</span> <dfn class="nv idl-code" data-dfn-for="HTMLTableElement/deleteRow(index)" data-dfn-type="argument" data-export="" id="dom-htmltableelement-deleterow-index-index">index<a class="self-link" href="tabular-data.html#dom-htmltableelement-deleterow-index-index"></a></dfn>);
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-5">table</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-109">represents</a> data with more than one dimension, in
  the form of a <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-1">table</a>.</p>
     <p><span class="impl">The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-6">table</a></code> element takes part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-1">table
  model</a>.</span> Tables have rows, columns, and cells given by their descendants. The rows and
  columns form a grid; a table’s cells must completely cover that grid without overlap.</p>
     <div class="impl">
      <p class="note" role="note"> Precise rules for determining whether this conformance requirement is met are
  described in the description of the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-2">table model</a>. </p>
     </div>
     <p>Authors are encouraged to provide information describing how to interpret complex tables.
  Guidance on how to <a data-link-type="dfn" href="tabular-data.html#provide-such-information" id="ref-for-provide-such-information-1">provide such information</a> is given
  below.</p>
     <p>Tables should not be used as layout aids.</p>
     <p>Historically, many Web authors have tables in HTML as a way to
  control their page layout making it difficult to extract tabular
  data from such documents.</p>
     <p>In particular, users of accessibility tools, like screen readers,
  are likely to find it very difficult to navigate pages with tables
  used for layout.</p>
     <p>If a table is to be used for layout it must be marked with the
  attribute <code>role="presentation"</code> for a
  user agent to properly represent the table to an assistive technology and to properly convey the
  intent of the author to tools that wish to extract tabular data from
  the document.</p>
     <p class="note" role="note"> There are a variety of alternatives to using HTML
  tables for layout, primarily using CSS positioning and the CSS table
  model. <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a> </p>
     <p>The <dfn data-dfn-for="HTMLTableElement" data-dfn-type="element-attr" data-export="" id="element-attrdef-htmltableelement-border"><code>border</code><a class="self-link" href="tabular-data.html#element-attrdef-htmltableelement-border"></a></dfn> content attribute may be specified on a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-7">table</a></code> element to
  explicitly indicate that the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-8">table</a></code> element is not being
  used for layout purposes. If specified, the attribute’s value must
  either be the empty string or the value "<code>1</code>".
  The attribute is used by certain user agents as an indication that
  borders should be drawn around cells of the table.</p>
     <div class="impl">
      <hr>
      <p>Tables can be complicated to understand and navigate. To help
  users with this, user agents should clearly delineate cells in a
  table from each other, unless the user agent has classified the
  table as a
  layout table.</p>
     </div>
     <p class="note" role="note"> Authors <span class="impl">and implementors</span> are encouraged to consider using some of the <a data-link-type="dfn" href="tabular-data.html#provide-such-information" id="ref-for-provide-such-information-2">table design techniques</a> described below to make tables easier to navigate for users. </p>
     <div class="impl">
      <p>User agents, especially those that do table analysis on arbitrary content, are encouraged to
  find heuristics to determine which tables actually contain data and which are merely being used
  for layout. This specification does not define a precise heuristic, but the following are
  suggested as possible indicators:</p>
      <table>
       <thead>
        <tr>
         <th>Feature 
         </th><th>Indication 
       </th></tr></thead><tbody>
        <tr>
         <td>The use of the <code>role</code> attribute with the value <code>presentation</code> 
         </td><td>Probably a layout table 
        </td></tr><tr>
         <td>The use of the non-conforming <code>border</code> attribute with the non-conforming value 0 
         </td><td>Probably a layout table 
        </td></tr><tr>
         <td>The use of the non-conforming <code>cellspacing</code> and <code>cellpadding</code> attributes with the value 0 
         </td><td>Probably a layout table 
       </td></tr></tbody><tbody>
        <tr>
         <td>The use of <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-2">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-2">thead</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-3">th</a></code> elements 
         </td><td>Probably a non-layout table 
        </td></tr><tr>
         <td>The use of the <code>headers</code> and <code>scope</code> attributes 
         </td><td>Probably a non-layout table 
        </td></tr><tr>
         <td>The use of the non-conforming <code>border</code> attribute with a value other than 0 
         </td><td>Probably a non-layout table 
        </td></tr><tr>
         <td>Explicit visible borders set using CSS 
         </td><td>Probably a non-layout table 
       </td></tr></tbody><tbody>
        <tr>
         <td>The use of the <code>summary</code> attribute 
         </td><td>Not a good indicator (both layout and non-layout tables have historically been given this attribute) 
      </td></tr></tbody></table>
      <p class="note" role="note"> It is quite possible that the above suggestions are wrong. Implementors are urged
  to provide feedback elaborating on their experiences with trying to create a layout table
  detection heuristic. </p>
      <p>If a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-9">table</a></code> element has a (non-conforming) <code>summary</code> attribute, and the user agent has not classified the
  table as a layout table, the user agent may report the contents of that attribute to the user.</p>
     </div>
     <hr>
     <dl class="domintro">
      <dt><var>table</var> . <code>caption</code> [ = <var>value</var> ]
      </dt><dd>
       <p>Returns the table’s <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-3">caption</a></code> element.</p>
       <p>Can be set, to replace the <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-4">caption</a></code> element.</p>
      </dd><dt><var>caption</var> = <var>table</var> . <code>createCaption</code>()
      </dt><dd>
       <p>Ensures the table has a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-5">caption</a></code> element, and returns it.</p>
      </dd><dt><var>table</var> . <code>deleteCaption</code>()
      </dt><dd>
       <p>Ensures the table does not have a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-6">caption</a></code> element.</p>
      </dd><dt><var>table</var> . <code>tHead</code> [ = <var>value</var> ]
      </dt><dd>
       <p>Returns the table’s <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-3">thead</a></code> element.</p>
       <p>Can be set, to replace the <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-4">thead</a></code> element. If the new value is not a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-5">thead</a></code> element, throws a <code>HierarchyRequestError</code> exception.</p>
      </dd><dt><var>thead</var> = <var>table</var> . <code>createTHead</code>()
      </dt><dd>
       <p>Ensures the table has a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-6">thead</a></code> element, and returns it.</p>
      </dd><dt><var>table</var> . <code>deleteTHead</code>()
      </dt><dd>
       <p>Ensures the table does not have a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-7">thead</a></code> element.</p>
      </dd><dt><var>table</var> . <code>tFoot</code> [ = <var>value</var> ]
      </dt><dd>
       <p>Returns the table’s <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-2">tfoot</a></code> element.</p>
       <p>Can be set, to replace the <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-3">tfoot</a></code> element. If the new value is not a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-4">tfoot</a></code> element, throws a <code>HierarchyRequestError</code> exception.</p>
      </dd><dt><var>tfoot</var> = <var>table</var> . <code>createTFoot</code>()
      </dt><dd>
       <p>Ensures the table has a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-5">tfoot</a></code> element, and returns it.</p>
      </dd><dt><var>table</var> . <code>deleteTFoot</code>()
      </dt><dd>
       <p>Ensures the table does not have a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-6">tfoot</a></code> element.</p>
      </dd><dt><var>table</var> . <code>tBodies</code>
      </dt><dd>
       <p>Returns an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-2">tbody</a></code> elements of the table.</p>
      </dd><dt><var>tbody</var> = <var>table</var> . <code>createTBody</code>()
      </dt><dd>
       <p>Creates a <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-3">tbody</a></code> element, inserts it into the table, and returns it.</p>
      </dd><dt><var>table</var> . <code>rows</code>
      </dt><dd>
       <p>Returns an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-3">tr</a></code> elements of the table.</p>
      </dd><dt><var>tr</var> = <var>table</var> . <code>insertRow</code>( [ <var>index</var> ] )
      </dt><dd>
       <p>Creates a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-4">tr</a></code> element, along with a <code>tbody</code> if required, inserts them
    into the table at the position given by the argument, and returns the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-5">tr</a></code>.</p>
       <p>The position is relative to the rows in the table. The index -1, which is the default
    if the argument is omitted, is equivalent to inserting at the end of the table.</p>
       <p>If the given position is less than -1 or greater than the number of rows, throws an <code>IndexSizeError</code> exception.</p>
      </dd><dt><var>table</var> . <code>deleteRow</code>(<var>index</var>)
      </dt><dd>
       <p>Removes the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-6">tr</a></code> element with the given position in the table.</p>
       <p>The position is relative to the rows in the table. The index -1 is equivalent to
    deleting the last row of the table.</p>
       <p>If the given position is less than -1 or greater than the index of the last row, or if
    there are no rows, throws an <code>IndexSizeError</code> exception.</p>
     </dd></dl>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="attribute" data-export="" id="dom-htmltableelement-caption"><code>caption</code></dfn> IDL attribute must return, on
  getting, the first <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-7">caption</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-10">table</a></code> element, if any,
  or null otherwise. On setting, the first <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-8">caption</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-11">table</a></code> element, if any, must be removed, and the new value, if not null, must be
  inserted as the first node of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-12">table</a></code> element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-createcaption"><code>createCaption()</code></dfn> method must return
  the first <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-9">caption</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-13">table</a></code> element, if any; otherwise
  a new <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-10">caption</a></code> element must be created, inserted as the first node of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-14">table</a></code> element, and then returned.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-deletecaption"><code>deleteCaption()</code></dfn> method must remove
  the first <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-11">caption</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-15">table</a></code> element, if any.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="attribute" data-export="" id="dom-htmltableelement-thead"><code>tHead</code></dfn> IDL attribute must return, on
  getting, the first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-8">thead</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-16">table</a></code> element, if any, or
  null otherwise. On setting, if the new value is null or a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-9">thead</a></code> element, the first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-10">thead</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-17">table</a></code> element, if any, must be removed, and
  the new value, if not null, must be inserted immediately before the first element in the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-18">table</a></code> element that is neither a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-12">caption</a></code> element nor a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-2">colgroup</a></code> element, if any, or at the end of the table if there are no such elements.
  If the new value is neither null nor a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-11">thead</a></code> element, then a <code>HierarchyRequestError</code> DOM exception must be thrown instead.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-createthead"><code>createTHead()</code></dfn> method must return the
  first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-12">thead</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-19">table</a></code> element, if any; otherwise a new <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-13">thead</a></code> element must be created and inserted immediately before the first element in
  the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-20">table</a></code> element that is neither a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-13">caption</a></code> element nor a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-3">colgroup</a></code> element, if any, or at the end of the table if there are no such elements,
  and then that new element must be returned.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-deletethead"><code>deleteTHead()</code></dfn> method must remove the
  first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-14">thead</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-21">table</a></code> element, if any.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="attribute" data-export="" id="dom-htmltableelement-tfoot"><code>tFoot</code></dfn> IDL attribute must return, on
  getting, the first <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-7">tfoot</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-22">table</a></code> element, if any, or
  null otherwise. On setting, if the new value is null or a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-8">tfoot</a></code> element, the first <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-9">tfoot</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-23">table</a></code> element, if any, must be removed, and
  the new value, if not null, must be inserted at the end of the table. If the new value is neither
  null nor a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-10">tfoot</a></code> element, then a <code>HierarchyRequestError</code> DOM exception
  must be thrown instead.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-createtfoot"><code>createTFoot()</code></dfn> method must return the
  first <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-11">tfoot</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-24">table</a></code> element, if any; otherwise a new <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-12">tfoot</a></code> element must be created and inserted at the end of the table, and then that new
  element must be returned.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-deletetfoot"><code>deleteTFoot()</code></dfn> method must remove the
  first <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-13">tfoot</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-25">table</a></code> element, if any.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="attribute" data-export="" id="dom-htmltableelement-tbodies"><code>tBodies</code></dfn> attribute must return an <code>HTMLCollection</code> rooted at the <code>table</code> node, whose filter matches only <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-4">tbody</a></code> elements that are children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-26">table</a></code> element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-createtbody"><code>createTBody()</code></dfn> method must create a
  new <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-5">tbody</a></code> element, insert it immediately after the last <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-6">tbody</a></code> element
  child in the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-27">table</a></code> element, if any, or at the end of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-28">table</a></code> element
  if the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-29">table</a></code> element has no <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-7">tbody</a></code> element children, and then must return
  the new <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-8">tbody</a></code> element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="attribute" data-export="" id="dom-htmltableelement-rows"><code>rows</code></dfn> attribute must return an <code>HTMLCollection</code> rooted at the <code>table</code> node, whose filter matches only <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-7">tr</a></code> elements that are either children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-30">table</a></code> element, or children
  of <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-15">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-9">tbody</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-14">tfoot</a></code> elements that are themselves
  children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-31">table</a></code> element. The elements in the collection must be ordered such
  that those elements whose parent is a <code>thead</code> are included first, in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-35">tree order</a>,
  followed by those elements whose parent is either a <code>table</code> or <code>tbody</code> element, again in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-36">tree order</a>, followed finally by those elements whose parent is a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-15">tfoot</a></code> element, still in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-37">tree order</a>.</p>
      <p>The behavior of the <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-insertrow"><code>insertRow(<var>index</var>)</code></dfn> method depends on the state of the table. When it is called,
  the method must act as required by the first item in the following list of conditions that
  describes the state of the table and the <var>index</var> argument:</p>
      <dl class="switch">
       <dt>If <var>index</var> is less than -1 or greater than the number of elements
    in <code>rows</code> collection:
       </dt><dd>The method must throw an <code>IndexSizeError</code> exception.
       </dd><dt>If the <code>rows</code> collection has zero elements in it, and the <code>table</code> has no <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-10">tbody</a></code> elements in it:
       </dt><dd>The method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-11">tbody</a></code> element, then create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-8">tr</a></code> element,
    then append the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-9">tr</a></code> element to the <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-12">tbody</a></code> element, then append the <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-13">tbody</a></code> element to the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-32">table</a></code> element, and finally return the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-10">tr</a></code> element.
       </dd><dt>If the <code>rows</code> collection has zero elements in it:
       </dt><dd>The method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-11">tr</a></code> element, append it to the last <code>tbody</code> element in the table, and return the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-12">tr</a></code> element.
       </dd><dt>If <var>index</var> is -1 or equal to the number of items in <code>rows</code> collection:
       </dt><dd>The method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-13">tr</a></code> element, and append it to the parent of the last <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-14">tr</a></code> element in the <code>rows</code> collection. Then, the
    newly created <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-15">tr</a></code> element must be returned.
       </dd><dt>Otherwise:
       </dt><dd>The method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-16">tr</a></code> element, insert it immediately before the <var>index</var>th <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-17">tr</a></code> element in the <code>rows</code> collection, in the same parent, and finally must return the newly created <code>tr</code> element.
      </dd></dl>
      <p>When the <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableElement" data-dfn-type="method" data-export="" id="dom-htmltableelement-deleterow"><code>deleteRow(<var>index</var>)</code></dfn> method is called, the user agent must run the following
  steps:</p>
      <ol>
       <li>If <var>index</var> is equal to -1, then <var>index</var> must be
    set to the number of items in the <code>rows</code> collection, minus
    one.
       </li><li>Now, if <var>index</var> is less than zero, or greater than or equal to the
    number of elements in the <code>rows</code> collection, the method must
    instead throw an <code>IndexSizeError</code> exception, and these steps must be aborted.
       </li><li>Otherwise, the method must remove the <var>index</var>th element in the <code>rows</code> collection from its parent. 
      </li></ol>
     </div>
     <div class="example" id="example-513af869">
      <a class="self-link" href="tabular-data.html#example-513af869"></a> Here is an example of a table being used to mark up a Sudoku puzzle. Observe the lack of
    headers, which are not necessary in such a table. 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h1&gt;</span>Today’s Sudoku<span class="nt">&lt;/h1&gt;</span>
  <span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;</span>
  <span class="nt">&lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;</span>
  <span class="nt">&lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;</span>
  <span class="nt">&lt;tbody&gt;</span>
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 1 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 3 <span class="nt">&lt;td&gt;</span> 6 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 4 <span class="nt">&lt;td&gt;</span> 7 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 9
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 2 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 9 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 1 <span class="nt">&lt;td&gt;</span>
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 7 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 6
  <span class="nt">&lt;tbody&gt;</span>
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 2 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 4 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 3 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 9 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 8
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 5 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 9 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 7 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 1
  <span class="nt">&lt;tbody&gt;</span>
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 6 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 5 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 2
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 7 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>
    <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 9 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 8 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 2 <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span>   <span class="nt">&lt;td&gt;</span> 5
  <span class="nt">&lt;/table&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
     </div>
     <h5 class="heading settled" data-level="4.9.1.1" id="sec-techniques-for-describing-tables"><span class="secno">4.9.1.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="provide such information|table design techniques" data-noexport="" id="provide-such-information">Techniques for describing tables</dfn></span><a class="self-link" href="tabular-data.html#sec-techniques-for-describing-tables"></a></h5>
     <p>For tables that consist of more than just a grid of cells with headers
  in the first row and headers in the first column, and for any table in general where the reader
  might have difficulty understanding the content, authors should include explanatory information
  introducing the table. This information is useful for all users, but is especially useful for
  users who cannot see the table, e.g., users of screen readers.</p>
     <p>Such explanatory information should introduce the purpose of the table, outline its basic cell
  structure, highlight any trends or patterns, and generally teach the user how to use the
  table.</p>
     <p>For instance, the following table:</p>
     <table>
      <caption>Characteristics with positive and negative sides</caption>
      <thead>
       <tr>
        <th id="n"> Negative 
        </th><th> Characteristic 
        </th><th> Positive 
      </th></tr></thead><tbody>
       <tr>
        <td headers="n r1"> Sad 
        </td><th id="r1"> Mood 
        </th><td> Happy 
       </td></tr><tr>
        <td headers="n r2"> Failing 
        </td><th id="r2"> Grade 
        </th><td> Passing 
     </td></tr></tbody></table>
     <p>...could benefit from a description explaining the way the table is laid out, something like
  "Characteristics are given in the second column, with the negative side in the left column and the
  positive side in the right column".</p>
     <p>There are a variety of ways to include this information, such as:</p>
     <dl>
      <dt>In prose, surrounding the table
      </dt><dd>
       <div class="example" id="example-0a8eed00">
        <a class="self-link" href="tabular-data.html#example-0a8eed00"></a>
<pre class="highlight"><span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"summary"</span><span class="nt">&gt;</span>In the following table, characteristics are
given in the second column, with the negative side in the left column and the positive
side in the right column.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;table</span> <span class="na">aria-describedby=</span><span class="s">"summary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;caption&gt;</span>Characteristics with positive and negative sides<span class="nt">&lt;/caption&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"n"</span><span class="nt">&gt;</span> Negative
    <span class="nt">&lt;th&gt;</span> Characteristic
    <span class="nt">&lt;th&gt;</span> Positive
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td</span> <span class="na">headers=</span><span class="s">"n r1"</span><span class="nt">&gt;</span> Sad
    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"r1"</span><span class="nt">&gt;</span> Mood
    <span class="nt">&lt;td&gt;</span> Happy
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td</span> <span class="na">headers=</span><span class="s">"n r2"</span><span class="nt">&gt;</span> Failing
    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"r2"</span><span class="nt">&gt;</span> Grade
    <span class="nt">&lt;td&gt;</span> Passing
<span class="nt">&lt;/table&gt;</span>
    
</pre>
       </div>
       <p class="note" role="note"> In the example above the <a data-link-type="element-attr" href="infrastructure.html#element-attrdef-global-aria-describedby" id="ref-for-element-attrdef-global-aria-describedby-1"><code>aria-describedby</code></a> attribute is used to explicitly associate the information
    with the table for assistive technology users. </p>
      </dd><dt>Next to the table, in the same <code>figure</code>
      </dt><dd>
       <div class="example" id="example-a07a0651">
        <a class="self-link" href="tabular-data.html#example-a07a0651"></a>
<pre class="highlight"><span class="nt">&lt;figure</span> <span class="na">aria-labelledby=</span><span class="s">"caption"</span><span class="nt">&gt;</span> 
<strong> <span class="nt">&lt;p&gt;</span>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.<span class="nt">&lt;/p&gt;</span></strong>
  <span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;caption</span> <span class="na">id=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Characteristics with positive and negative sides<span class="nt">&lt;/caption&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"n"</span><span class="nt">&gt;</span> Negative
    <span class="nt">&lt;th&gt;</span> Characteristic
    <span class="nt">&lt;th&gt;</span> Positive
  <span class="nt">&lt;tbody&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td</span> <span class="na">headers=</span><span class="s">"n r1"</span><span class="nt">&gt;</span> Sad
    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"r1"</span><span class="nt">&gt;</span> Mood
    <span class="nt">&lt;td&gt;</span> Happy
    <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td</span> <span class="na">headers=</span><span class="s">"n r2"</span><span class="nt">&gt;</span> Failing
    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"r2"</span><span class="nt">&gt;</span> Grade
    <span class="nt">&lt;td&gt;</span> Passing
  <span class="nt">&lt;/table&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
    </pre>
       </div>
       <p class="note" role="note"> The <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-31">figure</a></code> in this example has been labeled by the <code>table</code> <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-14">caption</a></code> using <code>aria-labelledby</code>.</p>
     </dd></dl>
     <p>Authors may also use other techniques, or combinations of the above techniques, as
  appropriate.</p>
     <p class="note" role="note">Regardless of the method used to provide additional descriptive information for a <code>table</code>, if a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-33">table</a></code> needs a caption, authors should use a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-15">caption</a></code> element 
  as it is the most robust method for providing an accessible caption for a <code>table</code>.</p>
     <p>The best option, of course, rather than writing a description explaining the way the table is
  laid out, is to adjust the table such that no explanation is needed.</p>
     <div class="example" id="example-984e94f1">
      <a class="self-link" href="tabular-data.html#example-984e94f1"></a> In the case of the table used in the examples above, a simple rearrangement of the table so
    that the headers are on the top and left sides removes the need for an explanation as well as
    removing the need for the use of <code>headers</code> attributes: 
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;caption&gt;</span>Characteristics with positive and negative sides<span class="nt">&lt;/caption&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span> Characteristic
    <span class="nt">&lt;th&gt;</span> Negative
    <span class="nt">&lt;th&gt;</span> Positive
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span> Mood
    <span class="nt">&lt;td&gt;</span> Sad
    <span class="nt">&lt;td&gt;</span> Happy
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span> Grade
    <span class="nt">&lt;td&gt;</span> Failing
    <span class="nt">&lt;td&gt;</span> Passing
<span class="nt">&lt;/table&gt;</span>
</pre>
     </div>
     <h5 class="heading settled" data-level="4.9.1.2" id="techniques-for-table-design"><span class="secno">4.9.1.2. </span><span class="content">Techniques for table design</span><a class="self-link" href="tabular-data.html#techniques-for-table-design"></a></h5>
     <p>Good table design is key to making tables more readable and usable.</p>
     <p>In visual media, providing column and row borders and alternating row backgrounds can be very
  effective to make complicated tables more readable.</p>
     <p>For tables with large volumes of numeric content, using monospaced fonts can help users see
  patterns, especially in situations where a user agent does not render the borders. (Unfortunately,
  for historical reasons, not rendering borders on tables is a common default.)</p>
     <p>In speech media, table cells can be distinguished by reporting the corresponding headers before
  reading the cell’s contents, and by allowing users to navigate the table in a grid fashion, rather
  than serializing the entire contents of the table in source order.</p>
     <p>Authors are encouraged to use CSS to achieve these effects.</p>
     <div class="impl">
      <p>User agents are encouraged to render tables using these techniques whenever the page does not
  use CSS and the table is not classified as a layout table.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.2" id="the-caption-element"><span class="secno">4.9.2. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-caption"><code>caption</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-caption-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-78">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-77">Contexts in which this element can be used</a>:
      </dt><dd>As the first element child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-34">table</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-80">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-108">Flow content</a>, but with no descendant <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-35">table</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-77">Tag omission in text/html</a>:
      </dt><dd>Neither tag is omissible
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-78">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-78">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-79">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-77">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableCaptionElement" data-dfn-type="interface" data-export="" id="htmltablecaptionelement-htmltablecaptionelement">HTMLTableCaptionElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-77">HTMLElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-16">caption</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-110">represents</a> the title of the <code>table</code> that is its parent, if it has a parent and that is a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-36">table</a></code> element.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-17">caption</a></code> element takes part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-3">table model</a>.</p>
     </div>
     <p>When a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-37">table</a></code> element is the only content in a <code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-32">figure</a></code> element other
  than the <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-23">figcaption</a></code>, the <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-18">caption</a></code> element should be omitted in favor of
  the <code><a data-link-type="element" href="grouping-content.html#elementdef-figcaption" id="ref-for-elementdef-figcaption-24">figcaption</a></code>.</p>
     <p>A caption can introduce context for a table, making it significantly easier to understand.</p>
     <div class="example" id="example-08bd4e34">
      <a class="self-link" href="tabular-data.html#example-08bd4e34"></a> Consider, for instance, the following table: 
      <table class="dice-example">
       <tbody>
        <tr>
         <th>
         </th><th> 1 
         </th><th> 2 
         </th><th> 3 
         </th><th> 4 
         </th><th> 5 
         </th><th> 6 
        </th></tr><tr>
         <th> 1 
         </th><td> 2 
         </td><td> 3 
         </td><td> 4 
         </td><td> 5 
         </td><td> 6 
         </td><td> 7 
        </td></tr><tr>
         <th> 2 
         </th><td> 3 
         </td><td> 4 
         </td><td> 5 
         </td><td> 6 
         </td><td> 7 
         </td><td> 8 
        </td></tr><tr>
         <th> 3 
         </th><td> 4 
         </td><td> 5 
         </td><td> 6 
         </td><td> 7 
         </td><td> 8 
         </td><td> 9 
        </td></tr><tr>
         <th> 4 
         </th><td> 5 
         </td><td> 6 
         </td><td> 7 
         </td><td> 8 
         </td><td> 9 
         </td><td> 10 
        </td></tr><tr>
         <th> 5 
         </th><td> 6 
         </td><td> 7 
         </td><td> 8 
         </td><td> 9 
         </td><td> 10 
         </td><td> 11 
        </td></tr><tr>
         <th> 6 
         </th><td> 7 
         </td><td> 8 
         </td><td> 9 
         </td><td> 10 
         </td><td> 11 
         </td><td> 12 
      </td></tr></tbody></table>
      <p>In the abstract, this table is not clear. However, with a caption giving the table’s number
    (for reference in the main prose) and explaining its use, it makes more sense:</p>
<pre class="highlight"><span class="nt">&lt;caption&gt;</span>
<span class="nt">&lt;p&gt;</span>Table 1.
<span class="nt">&lt;p&gt;</span>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
<span class="nt">&lt;/caption&gt;</span>
</pre>
      <p>This provides the user with more context:</p>
      <table class="dice-example">
       <caption> Table 1.
      This table shows the total score obtained from rolling two
      six-sided dice. The first row represents the value of the first
      die, the first column the value of the second die. The total is
      given in the cell that corresponds to the values of the two dice. </caption>
       <tbody>
        <tr>
         <th>
         </th><th> 1 
         </th><th> 2 
         </th><th> 3 
         </th><th> 4 
         </th><th> 5 
         </th><th> 6 
        </th></tr><tr>
         <th> 1 
         </th><td> 2 
         </td><td> 3 
         </td><td> 4 
         </td><td> 5 
         </td><td> 6 
         </td><td> 7 
        </td></tr><tr>
         <th> 2 
         </th><td> 3 
         </td><td> 4 
         </td><td> 5 
         </td><td> 6 
         </td><td> 7 
         </td><td> 8 
        </td></tr><tr>
         <th> 3 
         </th><td> 4 
         </td><td> 5 
         </td><td> 6 
         </td><td> 7 
         </td><td> 8 
         </td><td> 9 
        </td></tr><tr>
         <th> 4 
         </th><td> 5 
         </td><td> 6 
         </td><td> 7 
         </td><td> 8 
         </td><td> 9 
         </td><td> 10 
        </td></tr><tr>
         <th> 5 
         </th><td> 6 
         </td><td> 7 
         </td><td> 8 
         </td><td> 9 
         </td><td> 10 
         </td><td> 11 
        </td></tr><tr>
         <th> 6 
         </th><td> 7 
         </td><td> 8 
         </td><td> 9 
         </td><td> 10 
         </td><td> 11 
         </td><td> 12 
      </td></tr></tbody></table>
     </div>
     <h4 class="heading settled" data-level="4.9.3" id="the-colgroup-element"><span class="secno">4.9.3. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-colgroup"><code>colgroup</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-colgroup-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-79">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-78">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-38">table</a></code> element, after any <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-19">caption</a></code> elements and before any <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-16">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-14">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-16">tfoot</a></code>, and <code>tr</code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-81">Content model</a>:
      </dt><dd>If the <code>span</code> attribute is present: <a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-12">Nothing</a>.
      </dd><dd>If the <code>span</code> attribute is absent: Zero or more <code>col</code> and <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-9">template</a></code> elements.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-78">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-4">colgroup</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-27">end tag</a> may be omitted if the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-5">colgroup</a></code> element is not
    immediately followed by a <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-54">space character</a> or a <a data-link-type="dfn" href="syntax.html#comment" id="ref-for-comment-9">comment</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-79">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-79">Global attributes</a>
      </dd><dd><code>span</code> - Number of columns spanned by the element
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-80">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-78">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableColElement" data-dfn-type="interface" data-export="" id="htmltablecolelement-htmltablecolelement">HTMLTableColElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-78">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">unsigned</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="tabular-data.html#dom-htmltablecolelement-span" id="ref-for-dom-htmltablecolelement-span-1">span</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-6">colgroup</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-111">represents</a> a <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-1">group</a> of one or more <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-1">columns</a> in the <code>table</code> that is its parent, if it has a
  parent and that is a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-39">table</a></code> element.</p>
     <p>If the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-7">colgroup</a></code> element contains no <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-1">col</a></code> elements, then the element
  may have a <dfn class="dfn-paneled" data-dfn-for="colgroup" data-dfn-type="element-attr" data-export="" id="element-attrdef-colgroup-span"><code>span</code></dfn> content attribute specified,
  whose value must be a <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-12">valid non-negative integer</a> greater than zero.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-8">colgroup</a></code> element and its <code>span</code> attribute take part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-4">table model</a>.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableColElement" data-dfn-type="attribute" data-export="" id="dom-htmltablecolelement-span"><code>span</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-53">reflect</a> the content attribute of the same name. The value must be <a data-link-type="dfn" href="infrastructure.html#limited-to-only-non-negative-numbers-greater-than-zero" id="ref-for-limited-to-only-non-negative-numbers-greater-than-zero-1">limited to
  only non-negative numbers greater than zero</a>.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.4" id="the-col-element"><span class="secno">4.9.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-col"><code>col</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-col-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-80">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-79">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-9">colgroup</a></code> element that doesn’t have
    a <code>span</code> attribute.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-82">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#nothing" id="ref-for-nothing-13">Nothing</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-79">Tag omission in text/html</a>:
      </dt><dd>No <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-28">end tag</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-80">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-80">Global attributes</a>
      </dd><dd><code>span</code>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd>None
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-81">Global aria-* attributes</a>
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-79">DOM interface</a>:
      </dt><dd> <code class="idl"><a data-link-type="idl" href="tabular-data.html#htmltablecolelement-htmltablecolelement" id="ref-for-htmltablecolelement-htmltablecolelement-1">HTMLTableColElement</a></code>, same as for <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-10">colgroup</a></code> elements. This interface defines one member, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-15">span</a></code>. 
     </dd></dl>
     <p>If a <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-2">col</a></code> element has a parent and that is a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-11">colgroup</a></code> element that
  itself has a parent that is a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-40">table</a></code> element, then the <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-3">col</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-112">represents</a> one or more <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-2">columns</a> in the <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-2">column group</a> represented by that <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-12">colgroup</a></code>.</p>
     <p>The element may have a <dfn class="dfn-paneled" data-dfn-for="col" data-dfn-type="element-attr" data-export="" id="element-attrdef-col-span"><code>span</code></dfn> content attribute
  specified, whose value must be a <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-13">valid non-negative integer</a> greater than zero.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-4">col</a></code> element and its <code>span</code> attribute take
  part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-5">table model</a>.</p>
      <p>The <code class="idl"><a data-link-type="idl" href="tabular-data.html#dom-htmltablecolelement-span" id="ref-for-dom-htmltablecolelement-span-2">span</a></code> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-54">reflect</a> the content attribute of the same name. The value must be <a data-link-type="dfn" href="infrastructure.html#limited-to-only-non-negative-numbers-greater-than-zero" id="ref-for-limited-to-only-non-negative-numbers-greater-than-zero-2">limited to only non-negative
  numbers greater than zero</a>.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.5" id="the-tbody-element"><span class="secno">4.9.5. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-tbody"><code>tbody</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-tbody-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-81">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-80">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-41">table</a></code> element, after any <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-20">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-13">colgroup</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-17">thead</a></code> elements, but only if there are no <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-18">tr</a></code> elements that are children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-42">table</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-83">Content model</a>:
      </dt><dd>Zero or more <code>tr</code> and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-8">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-80">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-15">tbody</a></code> element’s <a data-link-type="dfn" href="syntax.html#start-tag" id="ref-for-start-tag-6">start tag</a> may be omitted
  if the first thing inside the <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-16">tbody</a></code> element is a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-19">tr</a></code> element, and if the
  element is not immediately preceded by a <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-17">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-18">thead</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-17">tfoot</a></code> element whose <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-29">end tag</a> has been omitted. (It
  can’t be omitted if the element is empty.). A <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-18">tbody</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-30">end tag</a> may be omitted if
  the <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-19">tbody</a></code> element is immediately followed by a <code>tbody</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-18">tfoot</a></code> element, or if there is no more content in the parent element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-81">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-81">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-82">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-80">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableSectionElement" data-dfn-type="interface" data-export="" id="htmltablesectionelement-htmltablesectionelement">HTMLTableSectionElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-79">HTMLElement</a> {
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="tabular-data.html#dom-htmltablesectionelement-rows" id="ref-for-dom-htmltablesectionelement-rows-1">rows</a>;
  <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-80">HTMLElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltablesectionelement-insertrow" id="ref-for-dom-htmltablesectionelement-insertrow-1">insertRow</a>(<span class="kt">optional</span> <span class="kt">long</span> <dfn class="nv idl-code" data-dfn-for="HTMLTableSectionElement/insertRow(index), HTMLTableSectionElement/insertRow()" data-dfn-type="argument" data-export="" id="dom-htmltablesectionelement-insertrow-index-index">index<a class="self-link" href="tabular-data.html#dom-htmltablesectionelement-insertrow-index-index"></a></dfn> = -1);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltablesectionelement-deleterow" id="ref-for-dom-htmltablesectionelement-deleterow-1">deleteRow</a>(<span class="kt">long</span> <dfn class="nv idl-code" data-dfn-for="HTMLTableSectionElement/deleteRow(index)" data-dfn-type="argument" data-export="" id="dom-htmltablesectionelement-deleterow-index-index">index<a class="self-link" href="tabular-data.html#dom-htmltablesectionelement-deleterow-index-index"></a></dfn>);
};
</pre>
       <p>The <code class="idl"><a data-link-type="idl" href="tabular-data.html#htmltablesectionelement-htmltablesectionelement" id="ref-for-htmltablesectionelement-htmltablesectionelement-6">HTMLTableSectionElement</a></code> interface is also
      used for <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-19">thead</a></code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-19">tfoot</a></code> elements.</p>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-20">tbody</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-113">represents</a> a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block">block</a> of <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-1">rows</a> that consist of a
  body of data for the parent <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-43">table</a></code> element, if the <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-21">tbody</a></code> element has a
  parent and it is a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-44">table</a></code>.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-22">tbody</a></code> element takes part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-6">table model</a>.</p>
     </div>
     <dl class="domintro">
      <dt><var>tbody</var> . <code>rows</code>
      </dt><dd>
       <p>Returns an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-20">tr</a></code> elements of the table
    section.</p>
      </dd><dt><var>tr</var> = <var>tbody</var> . <code>insertRow</code>( [ <var>index</var> ] )
      </dt><dd>
       <p>Creates a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-21">tr</a></code> element, inserts it into the table section at the position given by
    the argument, and returns the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-22">tr</a></code>.</p>
       <p>The position is relative to the rows in the table section. The index -1, which is the
    default if the argument is omitted, is equivalent to inserting at the end of the table
    section.</p>
       <p>If the given position is less than -1 or greater than the number of rows, throws an <code>IndexSizeError</code> exception.</p>
      </dd><dt><var>tbody</var> . <code>deleteRow</code>(<var>index</var>)
      </dt><dd>
       <p>Removes the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-23">tr</a></code> element with the given position in the table section.</p>
       <p>The position is relative to the rows in the table section. The index -1 is equivalent
    to deleting the last row of the table section.</p>
       <p>If the given position is less than -1 or greater than the index of the last row, or if
    there are no rows, throws an <code>IndexSizeError</code> exception.</p>
     </dd></dl>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableSectionElement" data-dfn-type="attribute" data-export="" id="dom-htmltablesectionelement-rows"><code>rows</code></dfn> attribute must return an <code>HTMLCollection</code> rooted at the element, whose filter matches only <code>tr</code> elements that are children of the element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableSectionElement" data-dfn-type="method" data-export="" id="dom-htmltablesectionelement-insertrow"><code>insertRow(<var>index</var>)</code></dfn> method must, when invoked on an element <var>table section</var>, act as follows:</p>
      <p>If <var>index</var> is less than -1 or greater than the number of elements in
  the <code>rows</code> collection, the method must throw an <code>IndexSizeError</code> exception.</p>
      <p>If <var>index</var> is -1 or equal to the number of items in the <code>rows</code> collection, the method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-24">tr</a></code> element,
  append it to the element <var>table section</var>, and return the newly created <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-25">tr</a></code> element.</p>
      <p>Otherwise, the method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-26">tr</a></code> element, insert it as a child of the <var>table section</var> element, immediately before the <var>index</var>th <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-27">tr</a></code> element in the <code>rows</code> collection, and finally
  must return the newly created <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-28">tr</a></code> element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableSectionElement" data-dfn-type="method" data-export="" id="dom-htmltablesectionelement-deleterow"><code>deleteRow(<var>index</var>)</code></dfn> method
  must, when invoked, act as follows:</p>
      <p>If <var>index</var> is less than -1 or greater than the number of elements in
  the <code>rows</code> collection, the method must throw an <code>IndexSizeError</code> exception.</p>
      <p>If <var>index</var> is -1, remove the last element in the <code>rows</code> collection from its parent.</p>
      <p>Otherwise, remove the <var>index</var>th element in the <code>rows</code> collection from its parent.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.6" id="the-thead-element"><span class="secno">4.9.6. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-thead"><code>thead</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-thead-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-82">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-81">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-45">table</a></code> element, after any <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-21">caption</a></code>, and <code>colgroup</code> elements and before any <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-23">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-20">tfoot</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-29">tr</a></code> elements, but only if there are no other <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-20">thead</a></code> elements that are children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-46">table</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-84">Content model</a>:
      </dt><dd>Zero or more <code>tr</code> and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-9">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-81">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-21">thead</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-31">end tag</a> may be omitted if
  the <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-22">thead</a></code> element is immediately followed by a <code>tbody</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-21">tfoot</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-82">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-82">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-83">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-81">DOM interface</a>:
      </dt><dd><code>HTMLTableSectionElement</code>, as defined for <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-24">tbody</a></code> elements.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-23">thead</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-114">represents</a> the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block">block</a> of <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-2">rows</a> that consist of
  the column labels (headers) for the parent <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-47">table</a></code> element, if the <code>thead</code> element has a parent and it is a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-48">table</a></code>.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-24">thead</a></code> element takes part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-7">table model</a>.</p>
     </div>
     <div class="example" id="example-52cbb871">
      <a class="self-link" href="tabular-data.html#example-52cbb871"></a> This example shows a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-25">thead</a></code> element being used. Notice the use of both <code>th</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-5">td</a></code> elements in the <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-26">thead</a></code> element: the first row is
    the headers, and the second row is an explanation of how to fill in the table. 
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;caption&gt;</span> School auction sign-up sheet <span class="nt">&lt;/caption&gt;</span>
<strong> <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;&lt;label</span> <span class="na">for=</span><span class="s">e1</span><span class="nt">&gt;</span>Name<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;th&gt;&lt;label</span> <span class="na">for=</span><span class="s">e2</span><span class="nt">&gt;</span>Product<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;th&gt;&lt;label</span> <span class="na">for=</span><span class="s">e3</span><span class="nt">&gt;</span>Picture<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;th&gt;&lt;label</span> <span class="na">for=</span><span class="s">e4</span><span class="nt">&gt;</span>Price<span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span>Your name here
    <span class="nt">&lt;td&gt;</span>What are you selling?
    <span class="nt">&lt;td&gt;</span>Link to a picture
    <span class="nt">&lt;td&gt;</span>Your reserve price
</strong> <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span>Ms Danus
    <span class="nt">&lt;td&gt;</span>Doughnuts
    <span class="nt">&lt;td&gt;&lt;img</span> <span class="na">src=</span><span class="s">"https://example.com/mydoughnuts.png"</span> <span class="na">title=</span><span class="s">"Doughnuts from Ms Danus"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;td&gt;</span>$45
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;&lt;input</span> <span class="na">id=</span><span class="s">e1</span> <span class="na">type=</span><span class="s">text</span> <span class="na">name=</span><span class="s">who</span> <span class="na">required</span> <span class="na">form=</span><span class="s">f</span><span class="nt">&gt;</span>
    <span class="nt">&lt;td&gt;&lt;input</span> <span class="na">id=</span><span class="s">e2</span> <span class="na">type=</span><span class="s">text</span> <span class="na">name=</span><span class="s">what</span> <span class="na">required</span> <span class="na">form=</span><span class="s">f</span><span class="nt">&gt;</span>
    <span class="nt">&lt;td&gt;&lt;input</span> <span class="na">id=</span><span class="s">e3</span> <span class="na">type=</span><span class="s">url</span> <span class="na">name=</span><span class="s">pic</span> <span class="na">form=</span><span class="s">f</span><span class="nt">&gt;</span>
    <span class="nt">&lt;td&gt;&lt;input</span> <span class="na">id=</span><span class="s">e4</span> <span class="na">type=</span><span class="s">number</span> <span class="na">step=</span><span class="s">0.01</span> <span class="na">min=</span><span class="s">0</span> <span class="na">value=</span><span class="s">0</span> <span class="na">required</span> <span class="na">form=</span><span class="s">f</span><span class="nt">&gt;</span>
<span class="nt">&lt;/table&gt;</span>
<span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">f</span> <span class="na">action=</span><span class="s">"/auction.cgi"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">button</span> <span class="na">name=</span><span class="s">add</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span>
</pre>
     </div>
     <h4 class="heading settled" data-level="4.9.7" id="the-tfoot-element"><span class="secno">4.9.7. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-tfoot"><code>tfoot</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-tfoot-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-83">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-82">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-49">table</a></code> element, after any <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-22">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-14">colgroup</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-27">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-25">tbody</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-30">tr</a></code> elements, but only if there
    are no other <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-22">tfoot</a></code> elements that are children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-50">table</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-85">Content model</a>:
      </dt><dd>Zero or more <code>tr</code> and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-10">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-82">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-23">tfoot</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-32">end tag</a> may be omitted if
  the <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-24">tfoot</a></code> element is immediately followed by a <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-26">tbody</a></code> element, or if
  there is no more content in the parent element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-83">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-83">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-84">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-82">DOM interface</a>:
      </dt><dd><code>HTMLTableSectionElement</code>, as defined for <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-27">tbody</a></code> elements.
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-25">tfoot</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-115">represents</a> the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#block">block</a> of <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-3">rows</a> that consist of
  the column summaries (footers) for the parent <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-51">table</a></code> element, if the <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-26">tfoot</a></code> element has a parent and it is a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-52">table</a></code>.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-27">tfoot</a></code> element takes part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-8">table model</a>.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.8" id="the-tr-element"><span class="secno">4.9.8. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-tr"><code>tr</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-tr-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-84">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-83">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-28">thead</a></code> element.
      </dd><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-28">tbody</a></code> element.
      </dd><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-28">tfoot</a></code> element.
      </dd><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-53">table</a></code> element, after any <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-23">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-15">colgroup</a></code>, and <code>thead</code> elements, but only if there are no <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-29">tbody</a></code> elements that
    are children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-54">table</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-86">Content model</a>:
      </dt><dd>Zero or more <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-6">td</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-4">th</a></code>, and <a data-link-type="dfn" href="dom.html#script-supporting-element" id="ref-for-script-supporting-element-11">script-supporting elements</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-83">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-31">tr</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-33">end tag</a> may be omitted if the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-32">tr</a></code> element is immediately followed by another <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-33">tr</a></code> element, or if there is
  no more content in the parent element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-84">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-84">Global attributes</a>
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-85">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-83">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableRowElement" data-dfn-type="interface" data-export="" id="htmltablerowelement-htmltablerowelement">HTMLTableRowElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-81">HTMLElement</a> {
  <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="long" href="tabular-data.html#dom-htmltablerowelement-rowindex" id="ref-for-dom-htmltablerowelement-rowindex-1">rowIndex</a>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="long" href="tabular-data.html#dom-htmltablerowelement-sectionrowindex" id="ref-for-dom-htmltablerowelement-sectionrowindex-1">sectionRowIndex</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="tabular-data.html#dom-htmltablerowelement-cells" id="ref-for-dom-htmltablerowelement-cells-1">cells</a>;
  <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-82">HTMLElement</a> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltablerowelement-insertcell" id="ref-for-dom-htmltablerowelement-insertcell-1">insertCell</a>(<span class="kt">optional</span> <span class="kt">long</span> <dfn class="nv idl-code" data-dfn-for="HTMLTableRowElement/insertCell(index), HTMLTableRowElement/insertCell()" data-dfn-type="argument" data-export="" id="dom-htmltablerowelement-insertcell-index-index">index<a class="self-link" href="tabular-data.html#dom-htmltablerowelement-insertcell-index-index"></a></dfn> = -1);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="tabular-data.html#dom-htmltablerowelement-deletecell" id="ref-for-dom-htmltablerowelement-deletecell-1">deleteCell</a>(<span class="kt">long</span> <dfn class="nv idl-code" data-dfn-for="HTMLTableRowElement/deleteCell(index)" data-dfn-type="argument" data-export="" id="dom-htmltablerowelement-deletecell-index-index">index<a class="self-link" href="tabular-data.html#dom-htmltablerowelement-deletecell-index-index"></a></dfn>);
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-34">tr</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-116">represents</a> a <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-4">row</a> of <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-1">cells</a> in a <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-2">table</a>.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-35">tr</a></code> element takes part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-9">table model</a>.</p>
     </div>
     <dl class="domintro">
      <dt><var>tr</var> . <code>rowIndex</code>
      </dt><dd>
       <p>Returns the position of the row in the table’s <code>rows</code> list.</p>
       <p>Returns -1 if the element isn’t in a table.</p>
      </dd><dt><var>tr</var> . <code>sectionRowIndex</code>
      </dt><dd>
       <p>Returns the position of the row in the table section’s <code>rows</code> list.</p>
       <p>Returns -1 if the element isn’t in a table section.</p>
      </dd><dt><var>tr</var> . <code>cells</code>
      </dt><dd>
       <p>Returns an <code>HTMLCollection</code> of the <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-5">th</a></code> elements of
    the row.</p>
      </dd><dt><var>cell</var> = <var>tr</var> . <code>insertCell</code>( [ <var>index</var> ] )
      </dt><dd>
       <p>Creates a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-7">td</a></code> element, inserts it into the table row at the position given by the
    argument, and returns the <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-8">td</a></code>.</p>
       <p>The position is relative to the cells in the row. The index -1, which is the default
    if the argument is omitted, is equivalent to inserting at the end of the row.</p>
       <p>If the given position is less than -1 or greater than the number of cells, throws an <code>IndexSizeError</code> exception.</p>
      </dd><dt><var>tr</var> . <code>deleteCell</code>(<var>index</var>)
      </dt><dd>
       <p>Removes the <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-6">th</a></code> element with the given position in the
    row.</p>
       <p>The position is relative to the cells in the row. The index -1 is equivalent to
    deleting the last cell of the row.</p>
       <p>If the given position is less than -1 or greater than the index of the last cell, or
    if there are no cells, throws an <code>IndexSizeError</code> exception.</p>
     </dd></dl>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableRowElement" data-dfn-type="attribute" data-export="" id="dom-htmltablerowelement-rowindex"><code>rowIndex</code></dfn> attribute must, if the element has
  a parent <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-55">table</a></code> element, or a parent <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-30">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-29">thead</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-29">tfoot</a></code> element and a <em>grandparent</em> <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-56">table</a></code> element, return the index
  of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-36">tr</a></code> element in that <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-57">table</a></code> element’s <code>rows</code> collection. If there is no such <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-58">table</a></code> element,
  then the attribute must return -1.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableRowElement" data-dfn-type="attribute" data-export="" id="dom-htmltablerowelement-sectionrowindex"><code>sectionRowIndex</code></dfn> attribute must, if
  the element has a parent <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-59">table</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-31">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-30">thead</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-30">tfoot</a></code> element, return the index of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-37">tr</a></code> element in the parent
  element’s <code>rows</code> collection (for tables, that’s the <code>HTMLTableElement.rows</code> collection; for table sections, that’s the <code>HTMLTableRowElement.rows</code> collection). If there is no such
  parent element, then the attribute must return -1.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableRowElement" data-dfn-type="attribute" data-export="" id="dom-htmltablerowelement-cells"><code>cells</code></dfn> attribute must return an <code>HTMLCollection</code> rooted at the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-38">tr</a></code> element, whose filter matches only <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-7">th</a></code> elements that are children of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-39">tr</a></code> element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableRowElement" data-dfn-type="method" data-export="" id="dom-htmltablerowelement-insertcell"><code>insertCell(<var>index</var>)</code></dfn> method must act as follows:</p>
      <p>If <var>index</var> is less than -1 or greater than the number of elements in
  the <code>cells</code> collection, the method must throw an <code>IndexSizeError</code> exception.</p>
      <p>If <var>index</var> is equal to -1 or equal to the number of items in <code>cells</code> collection, the method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-9">td</a></code> element,
  append it to the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-40">tr</a></code> element, and return the newly created <code>td</code> element.</p>
      <p>Otherwise, the method must create a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-10">td</a></code> element, insert it as a child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-41">tr</a></code> element, immediately before the <var>index</var>th <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-8">th</a></code> element in the <code>cells</code> collection, and finally
  must return the newly created <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-11">td</a></code> element.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableRowElement" data-dfn-type="method" data-export="" id="dom-htmltablerowelement-deletecell"><code>deleteCell(<var>index</var>)</code></dfn> method must act as follows:</p>
      <p>If <var>index</var> is less than -1 or greater than the number of elements in
  the <code>cells</code> collection, the method must throw an <code>IndexSizeError</code> exception.</p>
      <p>If <var>index</var> is -1, remove the last element in the <code>cells</code> collection from its parent.</p>
      <p>Otherwise, remove the <var>index</var>th element in the <code>cells</code> collection from its parent.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.9" id="the-td-element"><span class="secno">4.9.9. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-td"><code>td</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-td-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-85">Categories</a>:
      </dt><dd><a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-21">Sectioning root</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-84">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-42">tr</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-87">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-109">Flow content</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-84">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-12">td</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-34">end tag</a> may be omitted if the <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-13">td</a></code> element is immediately followed by a <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-9">th</a></code> element,
  or if there is no more content in the parent element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-85">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-85">Global attributes</a>
      </dd><dd><code>colspan</code> - Number of columns that the cell is to span
      </dd><dd><code>rowspan</code> - Number of rows that the cell is to span
      </dd><dd><code>headers</code> - The header cells for this cell
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-86">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-84">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableDataCellElement" data-dfn-type="interface" data-export="" id="htmltabledatacellelement-htmltabledatacellelement">HTMLTableDataCellElement</dfn> : <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablecellelement-htmltablecellelement" id="ref-for-htmltablecellelement-htmltablecellelement-1">HTMLTableCellElement</a> {};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-14">td</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-117">represents</a> a data <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-2">cell</a> in a table.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-15">td</a></code> element and its <code>colspan</code>, <code>rowspan</code>, and <code>headers</code> attributes take part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-10">table model</a>.</p>
      <p>User agents, especially in non-visual environments or where displaying the table as a 2D grid
  is impractical, may give the user context for the cell when rendering the contents of a cell; for
  instance, giving its position in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-11">table model</a>, or listing the cell’s header cells
  (as determined by the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-assigning-header-cells" id="ref-for-algorithm-for-assigning-header-cells-1">algorithm for assigning header cells</a>). When a cell’s header
  cells are being listed, user agents may use the value of <code>abbr</code> attributes on those header cells, if any, instead of the contents of the header cells
  themselves.</p>
     </div>
     <h4 class="heading settled" data-level="4.9.10" id="the-th-element"><span class="secno">4.9.10. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="element" data-export="" id="elementdef-th"><code>th</code></dfn> element</span><a class="self-link" href="tabular-data.html#the-th-element"></a></h4>
     <dl class="element">
      <dt><a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-86">Categories</a>:
      </dt><dd>None.
      </dd><dt><a data-link-type="dfn" href="dom.html#contexts-in-which-this-element-can-be-used" id="ref-for-contexts-in-which-this-element-can-be-used-85">Contexts in which this element can be used</a>:
      </dt><dd>As a child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-43">tr</a></code> element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-88">Content model</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-110">Flow content</a>, but with no <code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-27">header</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-29">footer</a></code>, <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-41">sectioning content</a>, or <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-12">heading content</a> descendants
      </dd><dt><a data-link-type="dfn" href="dom.html#tag-omission-in-text-html" id="ref-for-tag-omission-in-text-html-85">Tag omission in text/html</a>:
      </dt><dd>A <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-10">th</a></code> element’s <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-35">end tag</a> may be omitted if the <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-11">th</a></code> element is immediately followed by a <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-12">th</a></code> element,
  or if there is no more content in the parent element.
      </dd><dt><a data-link-type="dfn" href="dom.html#content-attribute" id="ref-for-content-attribute-86">Content attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-attributes" id="ref-for-global-attributes-86">Global attributes</a>
      </dd><dd><code>colspan</code> - Number of columns that the cell is to span
      </dd><dd><code>rowspan</code> - Number of rows that the cell is to span
      </dd><dd><code>headers</code> - The headers for this cell
      </dd><dd><code>scope</code> - Specifies which cells the header cell applies to
      </dd><dd><code>abbr</code> - Alternative label to use for the header cell when
    referencing the cell in other contexts
      </dd><dt>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values:
      </dt><dd><a href="dom.html#allowed-aria-roles-states-and-properties">Any role value</a>.
      </dd><dt>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a>:
      </dt><dd><a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-87">Global aria-* attributes</a>
      </dd><dd>Any <code>aria-*</code> attributes <a href="dom.html#allowed-aria-roles-states-and-properties">applicable to the allowed roles</a>.
      </dd><dt><a data-link-type="dfn" href="dom.html#dom-interface" id="ref-for-dom-interface-85">DOM interface</a>:
      </dt><dd>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableHeaderCellElement" data-dfn-type="interface" data-export="" id="htmltableheadercellelement-htmltableheadercellelement">HTMLTableHeaderCellElement</dfn> : <a class="n" data-link-type="idl-name" href="tabular-data.html#htmltablecellelement-htmltablecellelement" id="ref-for-htmltablecellelement-htmltablecellelement-2">HTMLTableCellElement</a> {
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="tabular-data.html#dom-htmltableheadercellelement-scope" id="ref-for-dom-htmltableheadercellelement-scope-1">scope</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="tabular-data.html#dom-htmltableheadercellelement-abbr" id="ref-for-dom-htmltableheadercellelement-abbr-1">abbr</a>;
};
</pre>
     </dd></dl>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-13">th</a></code> element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-118">represents</a> a header <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-3">cell</a> in a table.</p>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-14">th</a></code> element may have a <dfn class="dfn-paneled" data-dfn-for="th" data-dfn-type="element-attr" data-export="" id="element-attrdef-th-scope"><code>scope</code></dfn> content attribute specified. The <code>scope</code> attribute is an <a data-link-type="dfn" href="infrastructure.html#enumerated-attributes" id="ref-for-enumerated-attributes-10">enumerated attribute</a> with five states, four of which have explicit keywords:</p>
     <dl>
      <dt>The <dfn data-dfn-for="scope" data-dfn-type="attr-value" data-export="" id="attr-valuedef-scope-row"><code>row</code><a class="self-link" href="tabular-data.html#attr-valuedef-scope-row"></a></dfn> keyword, which maps to the <i>row</i> state
      </dt><dd>The <dfn class="dfn-paneled" data-dfn-for="scope" data-dfn-type="state" data-export="" id="statedef-scope-row">row</dfn> state means the header cell applies to some of the subsequent cells in the
    same row(s).
      </dd><dt>The <dfn data-dfn-for="scope" data-dfn-type="attr-value" data-export="" id="attr-valuedef-scope-col"><code>col</code><a class="self-link" href="tabular-data.html#attr-valuedef-scope-col"></a></dfn> keyword, which maps to the <i>column</i> state
      </dt><dd>The <dfn class="dfn-paneled" data-dfn-for="scope" data-dfn-type="state" data-export="" id="statedef-scope-column">column</dfn> state means the header cell applies to some of the subsequent cells in the
    same column(s).
      </dd><dt>The <dfn data-dfn-for="scope" data-dfn-type="attr-value" data-export="" id="attr-valuedef-scope-rowgroup"><code>rowgroup</code><a class="self-link" href="tabular-data.html#attr-valuedef-scope-rowgroup"></a></dfn> keyword, which maps to
    the <i>row group</i> state
      </dt><dd>The <dfn data-dfn-for="scope" data-dfn-type="state" data-export="" id="statedef-scope-row-group">row group<a class="self-link" href="tabular-data.html#statedef-scope-row-group"></a></dfn> state means the header cell applies to all the remaining cells in the
    row group. A <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-15">th</a></code> element’s <code>scope</code> attribute must
    not be in the <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-1">row group</a> state if the element is not
    anchored in a <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-2">row group</a>.
      </dd><dt>The <dfn data-dfn-for="scope" data-dfn-type="attr-value" data-export="" id="attr-valuedef-scope-colgroup"><code>colgroup</code><a class="self-link" href="tabular-data.html#attr-valuedef-scope-colgroup"></a></dfn> keyword, which maps to
    the <i>column group</i> state
      </dt><dd>The <dfn data-dfn-for="scope" data-dfn-type="state" data-export="" id="statedef-scope-colgroup-group">colgroup group<a class="self-link" href="tabular-data.html#statedef-scope-colgroup-group"></a></dfn> state means the header cell applies to all the remaining cells in the
    column group. A <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-16">th</a></code> element’s <code>scope</code> attribute must
    not be in the <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-3">column group</a> state if the element is
    not anchored in a <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-4">column group</a>.
      </dd><dt>The <i>auto</i> state
      </dt><dd>The <dfn class="dfn-paneled" data-dfn-for="scope" data-dfn-type="state" data-export="" id="statedef-scope-auto">auto</dfn> state makes the header cell apply to a set of cells selected based on
    context.
     </dd></dl>
     <p>The <code>scope</code> attribute’s <i>missing value default</i> is the <i>auto</i> state.</p>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-17">th</a></code> element may have an <dfn class="dfn-paneled" data-dfn-for="th" data-dfn-type="element-attr" data-export="" id="element-attrdef-th-abbr"><code>abbr</code></dfn> content attribute specified. Its value must be an alternative label for the header cell, to be
  used when referencing the cell in other contexts (e.g., when describing the header cells that apply
  to a data cell). It is typically an abbreviated form of the full header cell, but can also be an
  expansion, or merely a different phrasing.</p>
     <div class="impl">
      <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-18">th</a></code> element and its <code>colspan</code>, <code>rowspan</code>, <code>headers</code>, and <code>scope</code> attributes take part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-12">table model</a>.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableHeaderCellElement" data-dfn-type="attribute" data-export="" id="dom-htmltableheadercellelement-scope"><code>scope</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-55">reflect</a> the content attribute of the same name, <a data-link-type="dfn" href="infrastructure.html#limited-to-only-known-values" id="ref-for-limited-to-only-known-values-5">limited to only known values</a>.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableHeaderCellElement" data-dfn-type="attribute" data-export="" id="dom-htmltableheadercellelement-abbr"><code>abbr</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-56">reflect</a> the
  content attribute of the same name.</p>
     </div>
     <div class="example" id="example-203d1261">
      <a class="self-link" href="tabular-data.html#example-203d1261"></a> The following example shows how the <code>scope</code> attribute’s <code>rowgroup</code> value affects which data cells a header cell
    applies to. 
      <p>Here is a markup fragment showing a table:</p>
      <p class="note" role="note"> The <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-32">tbody</a></code> elements in this example identify the range of the row groups. </p>
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
    <span class="nt">&lt;caption&gt;</span>Measurement of legs and tails in Cats and English speakers<span class="nt">&lt;/caption&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th&gt;</span> ID <span class="nt">&lt;th&gt;</span> Measurement <span class="nt">&lt;th&gt;</span> Average <span class="nt">&lt;th&gt;</span> Maximum
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">rowgroup</span><span class="nt">&gt;</span> Cats <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;td&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 93 <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">row</span><span class="nt">&gt;</span> Legs <span class="nt">&lt;td&gt;</span> 3.5 <span class="nt">&lt;td&gt;</span> 4
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 10 <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">row</span><span class="nt">&gt;</span> Tails <span class="nt">&lt;td&gt;</span> 1 <span class="nt">&lt;td&gt;</span> 1
  <span class="nt">&lt;/tbody&gt;</span>
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">rowgroup</span><span class="nt">&gt;</span> English speakers <span class="nt">&lt;td&gt;</span> <span class="nt">&lt;td&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 32 <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">row</span><span class="nt">&gt;</span> Legs <span class="nt">&lt;td&gt;</span> 2.67 <span class="nt">&lt;td&gt;</span> 4
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;td&gt;</span> 35 <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">row</span><span class="nt">&gt;</span> Tails <span class="nt">&lt;td&gt;</span> 0.33 <span class="nt">&lt;td&gt;</span> 1
  <span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</pre>
      <p>This would result in the following table:</p>
      <table>
       <caption>Measurement of legs and tails in Cats and English speakers</caption>
       <thead>
        <tr>
         <th> ID 
         </th><th> Measurement 
         </th><th> Average 
         </th><th> Maximum 
       </th></tr></thead><tbody>
        <tr>
         <td>
         </td><th scope="rowgroup"> Cats 
         </th><td>
         </td><td>
        </td></tr><tr>
         <td> 93 
         </td><th scope="row"> Legs 
         </th><td> 3.5 
         </td><td> 4 
        </td></tr><tr>
         <td> 10 
         </td><th scope="row"> Tails 
         </th><td> 1 
         </td><td> 1 
       </td></tr></tbody><tbody>
        <tr>
         <td>
         </td><th scope="rowgroup"> English speakers 
         </th><td>
         </td><td>
        </td></tr><tr>
         <td> 32 
         </td><th scope="row"> Legs 
         </th><td> 2.67 
         </td><td> 4 
        </td></tr><tr>
         <td> 35 
         </td><th scope="row"> Tails 
         </th><td> 0.33 
         </td><td> 1 
      </td></tr></tbody></table>
      <p>The header cells in row 1 ("ID", "Measurement", "Average" and "Maximum") each apply only to the cells in their column.</p>
      <p>The header cells with a <code>scope=rowgroup</code> ("Cats" and 'English speakers') apply to all the cells in their row group other
    than the cells (to their left) in column 1:</p>
      <p>The header "Cats" (row 2, column 2) applies to the headers "Legs" (row 3, column 2)
    and "Tails" (row 4, column 2) and to the data cells
    in rows 2, 3 and 4 of the "Average" and "Maximum" columns.</p>
      <p>The header 'English speakers' (row 5, column 2) applies to the headers "Legs" (row 6, column 2)
    and "Tails" (row 7, column 2) and to the data cells in rows 5, 6 and 7 of the "Average" and "Maximum" columns.</p>
      <p>Each of the "Legs" and "Tails" header cells has a <code>scope=row</code> and therefore apply to the data cells (to the right)
    in their row, from the "Average" and "Maximum" columns.</p>
      <p><img alt="Representation of the example table overlayed with arrows indicating which cells each header applies to." height="256" src="images/table-scope-diagram.png" width="459"></p>
     </div>
     <h4 class="heading settled" data-level="4.9.11" id="attributes-common-to-td-and-th-elements"><span class="secno">4.9.11. </span><span class="content">Attributes common to <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-19">th</a></code> elements</span><a class="self-link" href="tabular-data.html#attributes-common-to-td-and-th-elements"></a></h4>
     <p><dfn data-dfn-type="dfn" data-lt="span multiple columns" data-noexport="" id="span-multiple-columns"><a class="self-link" href="tabular-data.html#span-multiple-columns"></a></dfn>The <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-16">td</a></code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-20">th</a></code> elements may have a <dfn class="dfn-paneled" data-dfn-for="tablecells" data-dfn-type="element-attr" data-export="" id="element-attrdef-tablecells-colspan"><code>colspan</code></dfn> content attribute specified, whose value must
  be a <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-14">valid non-negative integer</a> greater than zero.</p>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-17">td</a></code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-21">th</a></code> elements may also have a <dfn class="dfn-paneled" data-dfn-for="tablecells" data-dfn-type="element-attr" data-export="" id="element-attrdef-tablecells-rowspan"><code>rowspan</code></dfn> content attribute specified, whose value must
  be a <a data-link-type="dfn" href="infrastructure.html#valid-non-negative-integer" id="ref-for-valid-non-negative-integer-15">valid non-negative integer</a>. For this attribute, the value zero means that the
  cell is to span all the remaining rows in the row group.</p>
     <p>These attributes give the number of columns and rows respectively that the cell is to span.
  These attributes must not be used to overlap cells<span class="impl">, as described in the
  description of the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-13">table model</a></span>.</p>
     <hr>
     <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-18">td</a></code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-22">th</a></code> element may have a <dfn class="dfn-paneled" data-dfn-for="tablecells" data-dfn-type="element-attr" data-export="" id="element-attrdef-tablecells-headers"><code>headers</code></dfn> content attribute specified. The <code>headers</code> attribute, if specified, must contain a string consisting
  of an <a data-link-type="dfn" href="infrastructure.html#unordered-set-of-unique-space-separated-tokens" id="ref-for-unordered-set-of-unique-space-separated-tokens-3">unordered set of unique space-separated tokens</a> that are <a data-link-type="dfn" href="infrastructure.html#case-sensitive" id="ref-for-case-sensitive-5">case-sensitive</a>, each of which must have the value of an <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-id" id="ref-for-element-attrdef-global-id-5">id</a></code> of a <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-23">th</a></code> element taking part in the same <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-3">table</a> as the <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-19">td</a></code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-24">th</a></code> element<span class="impl"> (as defined by the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-14">table model</a>)</span>.</p>
     <p>A <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-25">th</a></code> element with <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-id" id="ref-for-element-attrdef-global-id-6">id</a></code> <var>id</var> is
  said to be <i>directly targeted</i> by all <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-26">th</a></code> elements in the
  same <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-4">table</a> that have <code>headers</code> attributes whose values include as one of their tokens
  the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-id">ID</a> <var>id</var>. A <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-27">th</a></code> element <var>A</var> is said to be <i>targeted</i> by a <code>th</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-20">td</a></code> element <var>B</var> if either <var>A</var> is <i>directly targeted</i> by <var>B</var> or if there exists an element <var>C</var> that is itself <i>targeted</i> by the element <var>B</var> and <var>A</var> is <i>directly
  targeted</i> by <var>C</var>.</p>
     <p>A <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-28">th</a></code> element must not be <i>targeted</i> by itself.</p>
     <div class="impl">
      <p>The <code>colspan</code>, <code>rowspan</code>, and <code>headers</code> attributes take part in the <a data-link-type="dfn" href="tabular-data.html#table-model" id="ref-for-table-model-15">table model</a>.</p>
     </div>
     <hr>
     <p>The <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-29">th</a></code> elements implement interfaces that inherit from the <code>HTMLTableCellElement</code> interface:</p>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLTableCellElement" data-dfn-type="interface" data-export="" id="htmltablecellelement-htmltablecellelement">HTMLTableCellElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-83">HTMLElement</a> {
  <span class="kt">attribute</span> <span class="kt">unsigned</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="tabular-data.html#dom-htmltablecellelement-colspan" id="ref-for-dom-htmltablecellelement-colspan-1">colSpan</a>;
  <span class="kt">attribute</span> <span class="kt">unsigned</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-type="unsigned long" href="tabular-data.html#dom-htmltablecellelement-rowspan" id="ref-for-dom-htmltablecellelement-rowspan-1">rowSpan</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">PutForwards</a>=<a class="n idl-code" data-link-type="attribute" href="https://dom.spec.whatwg.org/#dom-domtokenlist-value">value</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#domtokenlist">DOMTokenList</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMTokenList" href="tabular-data.html#dom-htmltablecellelement-headers" id="ref-for-dom-htmltablecellelement-headers-1">headers</a>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="kt">long</span> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="long" href="tabular-data.html#dom-htmltablecellelement-cellindex" id="ref-for-dom-htmltablecellelement-cellindex-1">cellIndex</a>;
};
</pre>
     <dl class="domintro">
      <dt><var>cell</var> . <code>cellIndex</code>
      </dt><dd>
       <p>Returns the position of the cell in the row’s <code>cells</code> list.
    This does not necessarily correspond to the <var>x</var>-position of the cell in the
    table, since earlier cells might cover multiple rows or columns.</p>
       <p>Returns -1 if the element isn’t in a row.</p>
     </dd></dl>
     <div class="impl">
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableCellElement" data-dfn-type="attribute" data-export="" id="dom-htmltablecellelement-colspan"><code>colSpan</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-57">reflect</a> the <code>colspan</code> content attribute. Its
  default value is 1.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableCellElement" data-dfn-type="attribute" data-export="" id="dom-htmltablecellelement-rowspan"><code>rowSpan</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-58">reflect</a> the <code>rowspan</code> content attribute. Its
  default value is 1.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableCellElement" data-dfn-type="attribute" data-export="" id="dom-htmltablecellelement-headers"><code>headers</code></dfn> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-59">reflect</a> the content attribute of the same name.</p>
      <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLTableCellElement" data-dfn-type="attribute" data-export="" id="dom-htmltablecellelement-cellindex"><code>cellIndex</code></dfn> IDL attribute must, if the
  element has a parent <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-44">tr</a></code> element, return the index of the cell’s element in the parent
  element’s <code>cells</code> collection. If there is no such parent element,
  then the attribute must return -1.</p>
     </div>
     <div class="impl">
      <h4 class="heading settled" data-level="4.9.12" id="tabular-data-processing-model"><span class="secno">4.9.12. </span><span class="content">Processing model</span><a class="self-link" href="tabular-data.html#tabular-data-processing-model"></a></h4>
      <p>The various table elements and their content attributes together define the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="table model" data-noexport="" id="table-model">table
  model</dfn>.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="table|tables" data-noexport="" id="table">table</dfn> consists of cells aligned on a two-dimensional grid of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="slots">slots</dfn> with coordinates (<var>x</var>, <var>y</var>). The grid is finite, and
  is either empty or has one or more slots. If the grid has one or more slots, then 
  the <var>x</var> coordinates are always in the range 
  0&nbsp;≤&nbsp;<var>x</var>&nbsp;&lt;&nbsp;<var>x<sub>width</sub></var>,
  and the <var>y</var> coordinates are always in the range
  0&nbsp;≤&nbsp;<var>y</var>&nbsp;&lt;&nbsp;<var>y<sub>height</sub></var>.
  If one or both of <var>x<sub>width</sub></var> and <var>y<sub>height</sub></var> are zero,
  then the table is empty (has no slots). Tables correspond to <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-60">table</a></code> elements.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cell|cells" data-noexport="" id="cell">cell</dfn> is a set of slots anchored at a slot
  (<var>cell<sub>x</sub></var>, <var>cell<sub>y</sub></var>), and with
  a particular <var>width</var> and <var>height</var> such that the cell covers
  all the slots with coordinates (<var>x</var>, <var>y</var>) where <var>cell<sub>x</sub></var>&nbsp;≤&nbsp;<var>x</var>&nbsp;&lt;&nbsp;<var>cell<sub>x</sub></var>+<var>width</var> and <var>cell<sub>y</sub></var>&nbsp;≤&nbsp;<var>y</var>&nbsp;&lt;&nbsp;<var>cell<sub>y</sub></var>+<var>height</var>.
  Cells can either be <em>data cells</em> or <em>header cells</em>. Data cells correspond
  to <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-21">td</a></code> elements, and header cells correspond to <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-30">th</a></code> elements. Cells of both types
  can have zero or more associated header cells.</p>
      <p>It is possible, in certain error cases, for two cells to occupy the same slot.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="row|rows" data-noexport="" id="row">row</dfn> is a complete set of slots from <var>x</var>=0 to <var>x</var>=<var>x<sub>width</sub></var>-1, for a particular value of <var>y</var>. Rows usually
  correspond to <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-45">tr</a></code> elements, though a <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-3">row group</a> can have some implied <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-5">rows</a> at the end in some cases involving <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-4">cells</a> spanning multiple rows.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="column|columns" data-noexport="" id="column">column</dfn> is a complete set of slots from <var>y</var>=0 to <var>y</var>=<var>y<sub>height</sub></var>-1, for a particular value of <var>x</var>. Columns can
  correspond to <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-5">col</a></code> elements. In the absence of <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-6">col</a></code> elements, columns are
  implied.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="row group|row groups" data-noexport="" id="row-group">row group</dfn> is a set of <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-6">rows</a> anchored at a slot (0, <var>group<sub>y</sub></var>) with a particular <var>height</var> such that the row group
  covers all the slots with coordinates (<var>x</var>, <var>y</var>) where 0&nbsp;≤&nbsp;<var>x</var>&nbsp;&lt;&nbsp;<var>x<sub>width</sub></var> and <var>group<sub>y</sub></var>&nbsp;≤&nbsp;<var>y</var>&nbsp;&lt;&nbsp;<var>group<sub>y</sub></var>+<var>height</var>. Row groups correspond to <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-33">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-31">thead</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-31">tfoot</a></code> elements. Not every row is
  necessarily in a row group.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="column group|column groups|group" data-noexport="" id="column-group">column group</dfn> is a set of <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-3">columns</a> anchored at a slot (<var>group<sub>x</sub></var>, 0) with a particular <var>width</var> such that the column group
  covers all the slots with coordinates (<var>x</var>, <var>y</var>) where <var>group<sub>x</sub></var>&nbsp;≤&nbsp;<var>x</var>&nbsp;&lt;&nbsp;<var>group<sub>x</sub></var>+<var>width</var> and 0&nbsp;≤&nbsp;<var>y</var>&nbsp;&lt;&nbsp;<var>y<sub>height</sub></var>. Column
  groups correspond to <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-16">colgroup</a></code> elements. Not every column is necessarily in a column
  group.</p>
      <p><a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-4">Row groups</a> cannot overlap each other. Similarly, <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-5">column groups</a> cannot overlap each other.</p>
      <p>A <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-5">cell</a> cannot cover slots that are from two or more <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-5">row groups</a>. It is, however, possible for a cell to be in multiple <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-6">column groups</a>. All the slots that form part of one cell
  are part of zero or one <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-6">row groups</a> and zero or more <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-7">column groups</a>.</p>
      <p>In addition to <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-6">cells</a>, <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-4">columns</a>, <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-7">rows</a>, <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-7">row groups</a>, and <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-8">column
  groups</a>, <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-5">tables</a> can have a <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-24">caption</a></code> element
  associated with them. This gives the table a heading, or legend.</p>
      <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="table-model-error">table model error</dfn> is an error with the data represented by <code>table</code> elements and their descendants. Documents must not have table model errors.</p>
      <h5 class="heading settled" data-level="4.9.12.1" id="forming-a-table"><span class="secno">4.9.12.1. </span><span class="content">Forming a table</span><a class="self-link" href="tabular-data.html#forming-a-table"></a></h5>
      <p>User agents must use the following algorithm to determine</p>
      <ul>
       <li>which elements correspond to which slots in a <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-6">table</a> associated with a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-61">table</a></code> element,
       </li><li>the dimensions of the table (<var>x<sub>width</sub></var> and <var>y<sub>height</sub></var>), and
       </li><li>if there are any <a data-link-type="dfn" href="tabular-data.html#table-model-error" id="ref-for-table-model-error-1">table model errors</a>
       . 
       <p class="note" role="note">The algorithm selects the first <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-25">caption</a></code> encountered and assigns it as
  the <code>caption</code> for the table, and selects the first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-32">thead</a></code> and processes it.
  Until there is a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-33">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-32">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-34">tbody</a></code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-46">tr</a></code> element, it processes any <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-17">colgroup</a></code> elements encountered, and any <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-7">col</a></code> children, to create column groups.
  Finally, from the first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-34">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-33">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-35">tbody</a></code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-47">tr</a></code> element encountered
  as a child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-62">table</a></code> it processes those elements, moving the first <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-34">tfoot</a></code> encountered to the end of the table respectively.</p>
       <ol>
        <li>
         <p>Let <var>x<sub>width</sub></var> be zero.</p>
        </li><li>
         <p>Let <var>y<sub>height</sub></var> be zero.</p>
        </li><li>
         <p>Let <var>table footer</var> be null.</p>
        </li><li>
         <p>Let <var>table header</var> be null.</p>
        </li><li>
         <p>Let <var>the table</var> be the <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-7">table</a> represented
    by the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-63">table</a></code> element. The <var>x<sub>width</sub></var> and <var>y<sub>height</sub></var> variables give <var>the table</var>’s
    dimensions. <var>The table</var> is initially empty.</p>
        </li><li>
         <p>If the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-64">table</a></code> element has no children elements, then return <var>the
    table</var> (which will be empty), and abort these steps.</p>
        </li><li>
         <p>Associate the first <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-26">caption</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-65">table</a></code> element with <var>the table</var>. If there are no such children, then it has no associated <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-27">caption</a></code> element.</p>
        </li><li>
         <p>Let the <var>current element</var> be the first element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-66">table</a></code> element.</p>
         <p>If a step in this algorithm ever requires the <var>current element</var> to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="advance|advanced to the next child of the table" data-noexport="" id="advance">advanced to the next child of the <code>table</code></dfn> when
    there is no such next child, then the user agent must jump to the step labeled <i>end</i>, near
    the end of this algorithm.</p>
        </li><li>
         <p>While the <var>current element</var> is not one of the following elements, <a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-1">advance</a> the <var>current element</var> to the next
    child of the <code>table</code>:</p>
         <ul class="brief">
          <li><code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-18">colgroup</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-35">thead</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-36">tbody</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-35">tfoot</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-48">tr</a></code>
         </li></ul>
        </li><li>
         <p>If the <var>current element</var> is a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-19">colgroup</a></code>, follow these
    substeps:</p>
         <ol>
          <li>
           <p><i>Column groups</i>: Process the <var>current element</var> according to the
      appropriate case below:</p>
           <dl class="switch">
            <dt>If the <var>current element</var> has any <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-8">col</a></code> element children
            </dt><dd>
             <p>Follow these steps:</p>
             <ol>
              <li>
               <p>Let <var>x<sub>start</sub></var> have the value of <var>x<sub>width</sub></var>.</p>
              </li><li>
               <p>Let the <var>current column</var> be the first <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-9">col</a></code> element child
          of the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-20">colgroup</a></code> element.</p>
              </li><li>
               <p><i>Columns</i>: If the <var>current column</var> <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-10">col</a></code> element has
          a <code>span</code> attribute, then parse its value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-9">rules for parsing non-negative integers</a>.</p>
               <p>If the result of parsing the value is not an error or zero, then let <var>span</var> be that value.</p>
               <p>Otherwise, if the <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-11">col</a></code> element has no <code>span</code> attribute, or if trying to parse the attribute’s value
          resulted in an error or zero, then let <var>span</var> be 1.</p>
              </li><li>
               <p>Increase <var>x<sub>width</sub></var> by <var>span</var>.</p>
              </li><li>
               <p>Let the last <var>span</var> <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-5">columns</a> in <var>the table</var> correspond to the <var>current column</var> <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-12">col</a></code> element.</p>
              </li><li>
               <p>If <var>current column</var> is not the last <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-13">col</a></code> element child of
          the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-21">colgroup</a></code> element, then let the <var>current column</var> be the
          next <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-14">col</a></code> element child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-22">colgroup</a></code> element, and return to
          the step labeled <i>columns</i>.</p>
              </li><li>
               <p>Let all the last <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-6">columns</a> in <var>the
          table</var> from x=<var>x<sub>start</sub></var> to
          x=<var>x<sub>width</sub></var>-1 form a new <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-9">column group</a>, anchored at the slot (<var>x<sub>start</sub></var>, 0), with width <var>x<sub>width</sub></var>-<var>x<sub>start</sub></var>, corresponding to the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-23">colgroup</a></code> element.</p>
             </li></ol>
            </dd><dt>If the <var>current element</var> has no <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-15">col</a></code> element children
            </dt><dd>
             <ol>
              <li>
               <p>If the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-24">colgroup</a></code> element has a <code>span</code> attribute, then parse its value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-10">rules for parsing non-negative
          integers</a>.</p>
               <p>If the result of parsing the value is not an error or zero, then let <var>span</var> be that value.</p>
               <p>Otherwise, if the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-25">colgroup</a></code> element has no <code>span</code> attribute, or if trying to parse the attribute’s
          value resulted in an error or zero, then let <var>span</var> be 1.</p>
              </li><li>
               <p>Increase <var>x<sub>width</sub></var> by <var>span</var>.</p>
              </li><li>
               <p>Let the last <var>span</var> <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-7">columns</a> in <var>the table</var> form a new <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-10">column
          group</a>, anchored at the slot (<var>x<sub>width</sub></var>-<var>span</var>, 0), with width <var>span</var>, corresponding to the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-26">colgroup</a></code> element.</p>
             </li></ol>
           </dd></dl>
          </li><li>
           <p><a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-2">Advance</a> the <var>current element</var> to the next child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-67">table</a></code>.</p>
          </li><li>
           <p>While the <var>current element</var> is not one of the following elements, <a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-3">advance</a> the <var>current element</var> to the
      next child of the <code>table</code>:</p>
           <ul class="brief">
            <li><code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-27">colgroup</a></code>
            </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-36">thead</a></code>
            </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-37">tbody</a></code>
            </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-36">tfoot</a></code>
            </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-49">tr</a></code>
           </li></ul>
          </li><li>
           <p>If the <var>current element</var> is a <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-28">colgroup</a></code> element, jump to the
      step labeled <i>column groups</i> above.</p>
         </li></ol>
        </li><li>
         <p>Let <var>y<sub>current</sub></var> be zero.</p>
        </li><li>
         <p>Let the <var>list of downward-growing cells</var> be an empty list.</p>
        </li><li>
         <p><i>Rows</i>: While the <var>current element</var> is not one of the following
    elements, <a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-4">advance</a> the <var>current
    element</var> to the next child of the <code>table</code>:</p>
         <ul class="brief">
          <li><code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-37">thead</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-38">tbody</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-37">tfoot</a></code>
          </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-50">tr</a></code>
         </li></ul>
        <p>Run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-processing-row-groups" id="ref-for-algorithm-for-processing-row-groups-1">algorithm for processing row groups</a> for the first <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-38">thead</a></code> child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-68">table</a></code>.</p>
        </li><li>
         <p>If the <var>current element</var> is a <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-38">tfoot</a></code> and the value of <var>table footer</var> is null, then run the following substeps:</p>
         <ol>
          <li>
           <p>let <var>table footer</var> be the current element;</p>
          <p></p>
          </li><li>
           <p><a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-5">advance</a> the <var>current element</var> to the next child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-69">table</a></code>, and </p>
          <p></p>
          </li><li>
           <p>return to the step labeled <i>rows</i>.</p>
         </li></ol>
         <p></p>
        </li><li>
         <p>If the <var>current element</var> is a <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-39">thead</a></code> and the value of <var>table header</var> is null, then run the following substeps:</p>
         <ol>
          <li>
           <p>let <var>table header</var> be the current element;</p>
          <p></p>
          </li><li>
           <p><a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-6">advance</a> the <var>current element</var> to the next child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-70">table</a></code>, and </p>
          <p></p>
          </li><li>
           <p>return to the step labeled <i>rows</i>.</p>
         </li></ol>
         <p></p>
        </li><li>
         <p>If the <var>current element</var> is a <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-51">tr</a></code> then run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-processing-rows" id="ref-for-algorithm-for-processing-rows-1">algorithm
    for processing rows</a>, <a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-7">advance</a> the <var>current element</var> to the next child
    of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-71">table</a></code>, and return to the step labeled <i>rows</i>.</p>
        </li><li>
         <p>Run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-ending-a-row-group" id="ref-for-algorithm-for-ending-a-row-group-1">algorithm for ending a row group</a>.</p>
        </li><li>
         <p>The <var>current element</var> is either a <code>thead</code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-39">tfoot</a></code>, or a <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-39">tbody</a></code>.</p>
         <p>Run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-processing-row-groups" id="ref-for-algorithm-for-processing-row-groups-2">algorithm for processing row groups</a>.</p>
        </li><li>
         <p><a data-link-type="dfn" href="tabular-data.html#advance" id="ref-for-advance-8">Advance</a> the <var>current element</var> to
    the next child of the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-72">table</a></code>.</p>
        </li><li>
         <p>Return to the step labeled <i>rows</i>.</p>
        </li><li>
         <p><i>End</i>: run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-processing-row-groups" id="ref-for-algorithm-for-processing-row-groups-3">algorithm for processing row groups</a> to process <var>table footer</var>.</p>
        </li><li>
         <p>If there exists a <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-8">row</a> or <a data-link-type="dfn" href="tabular-data.html#column" id="ref-for-column-8">column</a> in <var>the table</var> containing only <a data-link-type="dfn" href="tabular-data.html#slots" id="ref-for-slots-1">slots</a> that do not have a <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-7">cell</a> anchored to them, then this is a <a data-link-type="dfn" href="tabular-data.html#table-model-error" id="ref-for-table-model-error-2">table model error</a>.</p>
        </li><li>
         <p>Return <var>the table</var>.</p>
       </li></ol>
       <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="algorithm-for-processing-row-groups">algorithm for processing row groups</dfn>, which is invoked by the set of steps above
  for processing <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-40">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-40">tbody</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-40">tfoot</a></code> elements, is:</p>
       <ol>
        <li>
         <p>Let <var>y<sub>start</sub></var> have the value of <var>y<sub>height</sub></var>.</p>
        </li><li>
         <p>For each <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-52">tr</a></code> element that is a child of the element being processed, in tree
    order, run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-processing-rows" id="ref-for-algorithm-for-processing-rows-2">algorithm for processing rows</a>.</p>
        </li><li>
         <p>If <var>y<sub>height</sub></var>&nbsp;&gt;&nbsp;<var>y<sub>start</sub></var>, then let all the last <a data-link-type="dfn" href="tabular-data.html#row" id="ref-for-row-9">rows</a> in <var>the table</var> from y=<var>y<sub>start</sub></var> to y=<var>y<sub>height</sub></var>-1 form a new <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-8">row
    group</a>, anchored at the slot with coordinate (0, <var>y<sub>start</sub></var>), with height <var>y<sub>height</sub></var>-<var>y<sub>start</sub></var>, corresponding
    to the element being processed.</p>
        </li><li>
         <p>Run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-ending-a-row-group" id="ref-for-algorithm-for-ending-a-row-group-2">algorithm for ending a row group</a>.</p>
       </li></ol>
       <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="algorithm-for-ending-a-row-group">algorithm for ending a row group</dfn>, which is invoked by the set of steps above
  when starting and ending a block of rows, is:</p>
       <ol>
        <li>
         <p>While <var>y<sub>current</sub></var> is less than <var>y<sub>height</sub></var>, follow these steps:</p>
         <ol>
          <li>
           <p>Run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-growing-downward-growing-cells" id="ref-for-algorithm-for-growing-downward-growing-cells-1">algorithm for growing downward-growing cells</a>.</p>
          </li><li>
           <p>Increase <var>y<sub>current</sub></var> by 1.</p>
         </li></ol>
        </li><li>
         <p>Empty the <var>list of downward-growing cells</var>.</p>
       </li></ol>
       <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="algorithm-for-processing-rows">algorithm for processing rows</dfn>, which is invoked by the set of steps above for
  processing <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-53">tr</a></code> elements, is:</p>
       <ol>
        <li>
         <p>If <var>y<sub>height</sub></var> is equal to <var>y<sub>current</sub></var>, then increase <var>y<sub>height</sub></var> by</p>
         <ol>
          <li data-md="">
           <p>(<var>y<sub>current</sub></var> is never <em>greater</em> than <var>y<sub>height</sub></var>.)</p>
         </li></ol>
        </li><li>
         <p>Let <var>x<sub>current</sub></var> be 0.</p>
        </li><li>
         <p>Run the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-growing-downward-growing-cells" id="ref-for-algorithm-for-growing-downward-growing-cells-2">algorithm for growing downward-growing cells</a>.</p>
        </li><li>
         <p>If the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-54">tr</a></code> element being processed has no <code>td</code> or <code>th</code> element children, then increase <var>y<sub>current</sub></var> by 1, abort
    this set of steps, and return to the algorithm above.</p>
        </li><li>
         <p>Let <var>current cell</var> be the first <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-31">th</a></code> element child
    in the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-55">tr</a></code> element being processed.</p>
        </li><li>
         <p><i>Cells</i>: While <var>x<sub>current</sub></var> is less than <var>x<sub>width</sub></var> and the slot with coordinate (<var>x<sub>current</sub></var>, <var>y<sub>current</sub></var>) already has a
    cell assigned to it, increase <var>x<sub>current</sub></var> by 1.</p>
        </li><li>
         <p>If <var>x<sub>current</sub></var> is equal to <var>x<sub>width</sub></var>, increase <var>x<sub>width</sub></var> by 1. (<var>x<sub>current</sub></var> is never <em>greater</em> than <var>x<sub>width</sub></var>.)</p>
        </li><li>
         <p>If the <var>current cell</var> has a <code>colspan</code> attribute, then <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-11">parse that attribute’s
    value</a>, and let <var>colspan</var> be the result.</p>
         <p>If parsing that value failed, or returned zero, or if the attribute is absent, then let <var>colspan</var> be 1, instead.</p>
        </li><li>
         <p>If the <var>current cell</var> has a <code>rowspan</code> attribute, then <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-12">parse that attribute’s
    value</a>, and let <var>rowspan</var> be the result.</p>
         <p>If parsing that value failed or if the attribute is absent, then let <var>rowspan</var> be 1, instead.</p>
        </li><li>
         <p>If <var>rowspan</var> is zero and the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-73">table</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> is not set to <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-3">quirks mode</a>, then let <var>cell grows
    downward</var> be true, and set <var>rowspan</var> to 1. Otherwise, let <var>cell grows downward</var> be false.</p>
        </li><li>
         <p>If <var>x<sub>width</sub></var>&nbsp;&lt;&nbsp;<var>x<sub>current</sub></var>+<var>colspan</var>, then let <var>x<sub>width</sub></var> be <var>x<sub>current</sub></var>+<var>colspan</var>.</p>
        </li><li>
         <p>If <var>y<sub>height</sub></var>&nbsp;&lt;&nbsp;<var>y<sub>current</sub></var>+<var>rowspan</var>, then let <var>y<sub>height</sub></var> be <var>y<sub>current</sub></var>+<var>rowspan</var>.</p>
        </li><li>
         <p>Let the slots with coordinates (<var>x</var>, <var>y</var>) such that <var>x<sub>current</sub></var>&nbsp;≤&nbsp;<var>x</var>&nbsp;&lt;&nbsp;<var>x<sub>current</sub></var>+<var>colspan</var> and <var>y<sub>current</sub></var>&nbsp;≤&nbsp;<var>y</var>&nbsp;&lt;&nbsp;<var>y<sub>current</sub></var>+<var>rowspan</var> be covered by a
    new <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-8">cell</a> <var>c</var>, anchored at (<var>x<sub>current</sub></var>, <var>y<sub>current</sub></var>),
    which has width <var>colspan</var> and height <var>rowspan</var>,
    corresponding to the <var>current cell</var> element.</p>
         <p>If the <var>current cell</var> element is a <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-32">th</a></code> element, let this new
    cell <var>c</var> be a header cell; otherwise, let it be a data cell.</p>
         <p>To establish which header cells apply to the <var>current cell</var> element, use
    the <a data-link-type="dfn" href="tabular-data.html#algorithm-for-assigning-header-cells" id="ref-for-algorithm-for-assigning-header-cells-2">algorithm for assigning header cells</a> described in the next section.</p>
         <p>If any of the slots involved already had a <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-9">cell</a> covering
    them, then this is a <a data-link-type="dfn" href="tabular-data.html#table-model-error" id="ref-for-table-model-error-3">table model error</a>. Those slots now have two cells
    overlapping.</p>
        </li><li>
         <p>If <var>cell grows downward</var> is true, then add the tuple {<var>c</var>, <var>x<sub>current</sub></var>, <var>colspan</var>}
    to the <var>list of downward-growing cells</var>.</p>
        </li><li>
         <p>Increase <var>x<sub>current</sub></var> by <var>colspan</var>.</p>
        </li><li>
         <p>If <var>current cell</var> is the last <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-33">th</a></code> element child in
    the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-56">tr</a></code> element being processed, then increase <var>y<sub>current</sub></var> by 1, abort this set of steps, and return to the algorithm
    above.</p>
        </li><li>
         <p>Let <var>current cell</var> be the next <code>td</code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-34">th</a></code> element child
    in the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-57">tr</a></code> element being processed.</p>
        </li><li>
         <p>Return to the step labeled <i>cells</i>.</p>
       </li></ol>
       <p>When the algorithms above require the user agent to run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="algorithm for growing downward-growing cells" data-noexport="" id="algorithm-for-growing-downward-growing-cells">algorithm for growing
  downward-growing cells</dfn>, the user agent must, for each {<var>cell</var>, <var>cell<sub>x</sub></var>, <var>width</var>} tuple in the <var>list of downward-growing cells</var>, if any, extend the <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-10">cell</a> <var>cell</var> so that it also covers the slots with
  coordinates (<var>x</var>, <var>y<sub>current</sub></var>), where <var>cell<sub>x</sub></var>&nbsp;≤&nbsp;<var>x</var>&nbsp;&lt;&nbsp;<var>cell<sub>x</sub></var>+<var>width</var>.</p>
       <h5 class="heading settled" data-level="4.9.12.2" id="forming-relationships-between-data-cells-and-header-cells"><span class="secno">4.9.12.2. </span><span class="content">Forming relationships between data cells and header cells</span><a class="self-link" href="tabular-data.html#forming-relationships-between-data-cells-and-header-cells"></a></h5>
       <p>Each cell can be assigned zero or more header cells. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="algorithm for assigning header cells" data-noexport="" id="algorithm-for-assigning-header-cells">algorithm for assigning header
  cells</dfn> to a cell <var>principal cell</var> is as follows.</p>
       <ol>
        <li>
         <p>Let <var>header list</var> be an empty list of cells.</p>
        </li><li>
         <p>Let (<var>principal<sub>x</sub></var>, <var>principal<sub>y</sub></var>) be the coordinate of the slot to which the <var>principal
    cell</var> is anchored.</p>
        </li><li>
         <dl class="switch">
          <dt>If the <var>principal cell</var> has a <code>headers</code> attribute specified
          </dt><dd>
           <ol>
            <li>
             <p>Take the value of the <var>principal cell</var>’s <code>headers</code> attribute and <a data-link-type="dfn" href="infrastructure.html#split-a-string-on-spaces" id="ref-for-split-a-string-on-spaces-6">split it on spaces</a>, letting <var>id list</var> be the list of tokens
        obtained.</p>
            </li><li>
             <p>For each token in the <var>id list</var>, if the
        first element in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> with an <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-id">ID</a> equal to
        the token is a cell in the same <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-8">table</a>, and that cell is not the <var>principal cell</var>, then add that cell to <var>header list</var>.</p>
           </li></ol>
          </dd><dt>If <var>principal cell</var> does not have a <code>headers</code> attribute specified
          </dt><dd>
           <ol>
            <li>
             <p>Let <var>principal<sub>width</sub></var> be the width of the <var>principal cell</var>.</p>
            </li><li>
             <p>Let <var>principal<sub>height</sub></var> be the height of the <var>principal cell</var>.</p>
            </li><li>
             <p>For each value of <var>y</var> from <var>principal<sub>y</sub></var> to <var>principal<sub>y</sub></var>+<var>principal<sub>height</sub></var>-1, run
        the <a data-link-type="dfn" href="tabular-data.html#internal-algorithm-for-scanning-and-assigning-header-cells" id="ref-for-internal-algorithm-for-scanning-and-assigning-header-cells-1">internal algorithm for scanning and assigning header cells</a>, with the <var>principal cell</var>, the <var>header list</var>, the initial coordinate
        (<var>principal<sub>x</sub></var>,<var>y</var>), and the
        increments Δ<var>x</var>=-1 and Δ<var>y</var>=0.</p>
            </li><li>
             <p>For each value of <var>x</var> from <var>principal<sub>x</sub></var> to <var>principal<sub>x</sub></var>+<var>principal<sub>width</sub></var>-1, run
        the <a data-link-type="dfn" href="tabular-data.html#internal-algorithm-for-scanning-and-assigning-header-cells" id="ref-for-internal-algorithm-for-scanning-and-assigning-header-cells-2">internal algorithm for scanning and assigning header cells</a>, with the <var>principal cell</var>, the <var>header list</var>, the initial coordinate
        (<var>x</var>,<var>principal<sub>y</sub></var>), and the
        increments Δ<var>x</var>=0 and Δ<var>y</var>=-1.</p>
            </li><li>
             <p>If the <var>principal cell</var> is anchored in a <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-9">row group</a>, then add all header cells that are <a data-link-type="dfn" href="tabular-data.html#row-group-header" id="ref-for-row-group-header-1">row group headers</a> and are anchored in the same row group
        with an <var>x</var>-coordinate less than or equal to <var>principal<sub>x</sub></var>+<var>principal<sub>width</sub></var>-1 and a <var>y</var>-coordinate less than or
        equal to <var>principal<sub>y</sub></var>+<var>principal<sub>height</sub></var>-1 to <var>header
        list</var>.</p>
            </li><li>
             <p>If the <var>principal cell</var> is anchored in a <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-11">column group</a>, then add all header cells that are <a data-link-type="dfn" href="tabular-data.html#column-group-header" id="ref-for-column-group-header-1">column group headers</a> and are anchored in the same column
        group with an <var>x</var>-coordinate less than or equal to <var>principal<sub>x</sub></var>+<var>principal<sub>width</sub></var>-1 and a <var>y</var>-coordinate less than or
        equal to <var>principal<sub>y</sub></var>+<var>principal<sub>height</sub></var>-1 to <var>header
        list</var>.</p>
           </li></ol>
         </dd></dl>
        </li><li>
         <p>Remove all the <a data-link-type="dfn" href="tabular-data.html#empty-cell" id="ref-for-empty-cell-1">empty cells</a> from the <var>header list</var>.</p>
        </li><li>
         <p>Remove any duplicates from the <var>header list</var>.</p>
        </li><li>
         <p>Remove <var>principal cell</var> from the <var>header list</var> if it is
    there.</p>
        </li><li>
         <p>Assign the headers in the <var>header list</var> to the <var>principal cell</var>.</p>
       </li></ol>
       <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="internal-algorithm-for-scanning-and-assigning-header-cells">internal algorithm for scanning and assigning header cells</dfn>, given a <var>principal cell</var>, a <var>header list</var>, an initial coordinate (<var>initial<sub>x</sub></var>, <var>initial<sub>y</sub></var>),
  and Δ<var>x</var> and Δ<var>y</var> increments, is as follows:</p>
       <ol>
        <li>
         <p>Let <var>x</var> equal <var>initial<sub>x</sub></var>.</p>
        </li><li>
         <p>Let <var>y</var> equal <var>initial<sub>y</sub></var>.</p>
        </li><li>
         <p>Let <var>opaque headers</var> be an empty list of cells.</p>
        </li><li>
         <dl class="switch">
          <dt>If <var>principal cell</var> is a header cell
          </dt><dd>Let <var>in header block</var> be true, and let <var>headers from
      current header block</var> be a list of cells containing just the <var>principal
      cell</var>.
          </dd><dt>Otherwise
          </dt><dd>Let <var>in header block</var> be false and let <var>headers from
      current header block</var> be an empty list of cells. 
         </dd></dl>
        </li><li>
         <p><i>Loop</i>: Increment <var>x</var> by Δ<var>x</var>; increment <var>y</var> by Δ<var>y</var>.</p>
         <p class="note" role="note"> For each invocation of this algorithm, one of Δ<var>x</var> and
    Δ<var>y</var> will be -1, and the other will be 0. </p>
        </li><li>
         <p>If either <var>x</var> or <var>y</var> is less than 0, then abort this
    internal algorithm.</p>
        </li><li>
         <p>If there is no cell covering slot (<var>x</var>, <var>y</var>), or if there
    is more than one cell covering slot (<var>x</var>, <var>y</var>), return to
    the substep labeled <i>loop</i>.</p>
        </li><li>
         <p>Let <var>current cell</var> be the cell covering slot (<var>x</var>, <var>y</var>).</p>
        </li><li>
         <dl class="switch">
          <dt>If <var>current cell</var> is a header cell
          </dt><dd>
           <ol>
            <li>Set <var>in header block</var> to true.
            </li><li>Add <var>current cell</var> to <var>headers from current header block</var>.
            </li><li>Let <var>blocked</var> be false.
            </li><li>
             <dl class="switch">
              <dt>If Δ<var>x</var> is 0
              </dt><dd>
               <p>If there are any cells in the <var>opaque headers</var> list anchored with the
          same <var>x</var>-coordinate as the <var>current cell</var>, and with
          the same width as <var>current cell</var>, then let <var>blocked</var> be true.</p>
               <p>If the <var>current cell</var> is not a <a data-link-type="dfn" href="tabular-data.html#column-header" id="ref-for-column-header-1">column header</a>, then let <var>blocked</var> be true.</p>
              </dd><dt>If Δ<var>y</var> is 0
              </dt><dd>
               <p>If there are any cells in the <var>opaque headers</var> list anchored with the
          same <var>y</var>-coordinate as the <var>current cell</var>, and with
          the same height as <var>current cell</var>, then let <var>blocked</var> be true.</p>
               <p>If the <var>current cell</var> is not a <a data-link-type="dfn" href="tabular-data.html#row-header" id="ref-for-row-header-1">row header</a>, then let <var>blocked</var> be true.</p>
             </dd></dl>
            </li><li>If <var>blocked</var> is false, then add the <var>current cell</var> to the <var>headers list</var>.
           </li></ol>
          </dd><dt>If <var>current cell</var> is a data cell and <var>in header block</var> is true
          </dt><dd>Set <var>in header block</var> to false. Add all the cells in <var>headers from current header block</var> to the <var>opaque headers</var> list, and empty the <var>headers from current header block</var> list. 
         </dd></dl>
        </li><li>
         <p>Return to the step labeled <i>loop</i>.</p>
       </li></ol>
       <p>A header cell anchored at the slot with coordinate (<var>x</var>, <var>y</var>)
  with width <var>width</var> and height <var>height</var> is
  said to be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="column-header">column header</dfn> if any of the following conditions are true:</p>
       <ul>
        <li>The cell’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-td-scope" id="ref-for-element-attrdef-td-scope-1">scope</a></code> attribute is in the <a data-link-type="state" href="tabular-data.html#statedef-scope-column" id="ref-for-statedef-scope-column-1">column</a> state, or
        </li><li>The cell’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-td-scope" id="ref-for-element-attrdef-td-scope-2">scope</a></code> attribute is in the <a data-link-type="state" href="tabular-data.html#statedef-scope-auto" id="ref-for-statedef-scope-auto-1">auto</a> state,
    and there are no data cells in any of the cells
    covering slots with <var>y</var>-coordinates <var>y</var> .. <var>y</var>+<var>height</var>-1.
       </li></ul>
       <p>A header cell anchored at the slot with coordinate (<var>x</var>, <var>y</var>)
  with width <var>width</var> and height <var>height</var> is
  said to be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="row-header">row header</dfn> if any of the following conditions are true:</p>
       <ul>
        <li>The cell’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-td-scope" id="ref-for-element-attrdef-td-scope-3">scope</a></code> attribute is in the <a data-link-type="state" href="tabular-data.html#statedef-scope-row" id="ref-for-statedef-scope-row-1">row</a> state, or
        </li><li>The cell’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-td-scope" id="ref-for-element-attrdef-td-scope-4">scope</a></code> attribute is in the <a data-link-type="state" href="tabular-data.html#statedef-scope-auto" id="ref-for-statedef-scope-auto-2">auto</a> state,
    the cell is not a <a data-link-type="dfn" href="tabular-data.html#column-header" id="ref-for-column-header-2">column header</a>, and
    there are no data cells in any of the cells covering slots with <var>x</var>-coordinates <var>x</var> .. <var>x</var>+<var>width</var>-1.
       </li></ul>
       <p>A header cell is said to be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="column-group-header">column group header</dfn> if its <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-td-scope" id="ref-for-element-attrdef-td-scope-5">scope</a></code> attribute is in the <a data-link-type="dfn" href="tabular-data.html#column-group" id="ref-for-column-group-12">column
  group</a> state.</p>
       <p>A header cell is said to be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="row-group-header">row group header</dfn> if its <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-td-scope" id="ref-for-element-attrdef-td-scope-6">scope</a></code> attribute is in the <a data-link-type="dfn" href="tabular-data.html#row-group" id="ref-for-row-group-10">row
  group</a> state.</p>
       <p>A cell is said to be an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="empty-cell">empty cell</dfn> if it contains no elements and its text content,
  if any, consists only of <a data-link-type="dfn" href="infrastructure.html#white_space" id="ref-for-white_space-1">White_Space</a> characters.</p>
      </li></ul>
     </div>
     <h4 class="heading settled" data-level="4.9.13" id="examples"><span class="secno">4.9.13. </span><span class="content">Examples</span><a class="self-link" href="tabular-data.html#examples"></a></h4>
     <p><em>This section is non-normative.</em></p>
     <p>The following shows how might one mark up the bottom part of table 45 of the <cite>Smithsonian
  physical tables, Volume 71</cite>:</p>
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;caption&gt;</span>Specification values: <span class="nt">&lt;b&gt;</span>Steel<span class="nt">&lt;/b&gt;</span>, <span class="nt">&lt;b&gt;</span>Castings<span class="nt">&lt;/b&gt;</span>,
  Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.<span class="nt">&lt;/caption&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">rowspan=</span><span class="s">2</span><span class="nt">&gt;</span>Grade.<span class="nt">&lt;/th&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">rowspan=</span><span class="s">2</span><span class="nt">&gt;</span>Yield Point.<span class="nt">&lt;/th&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">colspan=</span><span class="s">2</span><span class="nt">&gt;</span>Ultimate tensile strength<span class="nt">&lt;/th&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">rowspan=</span><span class="s">2</span><span class="nt">&gt;</span>Per cent elong. 50.8mm or 2 in.<span class="nt">&lt;/th&gt;</span>
    <span class="nt">&lt;th</span> <span class="na">rowspan=</span><span class="s">2</span><span class="nt">&gt;</span>Per cent reduct. area.<span class="nt">&lt;/th&gt;</span>
  <span class="nt">&lt;/tr&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>kg/mm<span class="nt">&lt;sup&gt;</span>2<span class="nt">&lt;/sup&gt;&lt;/th&gt;</span>
    <span class="nt">&lt;th&gt;</span>lb/in<span class="nt">&lt;sup&gt;</span>2<span class="nt">&lt;/sup&gt;&lt;/th&gt;</span>
  <span class="nt">&lt;/tr&gt;</span>
  <span class="nt">&lt;/thead&gt;</span>
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span>Hard<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>0.45 ultimate<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>56.2<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>80,000<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>15<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>20<span class="nt">&lt;/td&gt;</span>
  <span class="nt">&lt;/tr&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span>Medium<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>0.45 ultimate<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>49.2<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>70,000<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>18<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>25<span class="nt">&lt;/td&gt;</span>
  <span class="nt">&lt;/tr&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;td&gt;</span>Soft<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>0.45 ultimate<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>42.2<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>60,000<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>22<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;td&gt;</span>30<span class="nt">&lt;/td&gt;</span>
  <span class="nt">&lt;/tr&gt;</span>
  <span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</pre>
     <p>This table could look like this:</p>
     <table>
      <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
    Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
      <thead>
       <tr>
        <th rowspan="2">Grade.
        </th><th rowspan="2">Yield Point.
        </th><th colspan="2">Ultimate tensile strength
        </th><th rowspan="2">Per cent elong. 50.8&nbsp;mm or&nbsp;2&nbsp;in.
        </th><th rowspan="2">Per cent reduct. area.
       </th></tr><tr>
        <th>kg/mm<sup>2</sup>
        </th><th>lb/in<sup>2</sup>
      </th></tr></thead><tbody>
       <tr>
        <td>Hard
        </td><td>0.45 ultimate
        </td><td>56.2
        </td><td>80,000
        </td><td>15
        </td><td>20
       </td></tr><tr>
        <td>Medium
        </td><td>0.45 ultimate
        </td><td>49.2
        </td><td>70,000
        </td><td>18
        </td><td>25
       </td></tr><tr>
        <td>Soft
        </td><td>0.45 ultimate
        </td><td>42.2
        </td><td>60,000
        </td><td>22
        </td><td>30
     </td></tr></tbody></table>
     <hr>
     <p>The following shows how one might mark up the gross margin table on page 46 of Apple, Inc’s
  10-K filing for fiscal year 2008:</p>
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>
    <span class="nt">&lt;th&gt;</span>2008
    <span class="nt">&lt;th&gt;</span>2007
    <span class="nt">&lt;th&gt;</span>2006
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>Net sales
    <span class="nt">&lt;td&gt;</span>$ 32,479
    <span class="nt">&lt;td&gt;</span>$ 24,006
    <span class="nt">&lt;td&gt;</span>$ 19,315
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>Cost of sales
    <span class="nt">&lt;td&gt;</span>  21,334
    <span class="nt">&lt;td&gt;</span>  15,852
    <span class="nt">&lt;td&gt;</span>  13,717
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>Gross margin
    <span class="nt">&lt;td&gt;</span>$ 11,145
    <span class="nt">&lt;td&gt;</span>$  8,154
    <span class="nt">&lt;td&gt;</span>$  5,598
  <span class="nt">&lt;tfoot&gt;</span>
  <span class="nt">&lt;tr&gt;</span>
    <span class="nt">&lt;th&gt;</span>Gross margin percentage
    <span class="nt">&lt;td&gt;</span>34.3%
    <span class="nt">&lt;td&gt;</span>34.0%
    <span class="nt">&lt;td&gt;</span>29.0%
<span class="nt">&lt;/table&gt;</span>
</pre>
     <p>This table could look like this:</p>
     <table class="apple-table-examples e1">
      <thead>
       <tr>
        <th>
        </th><th>2008
        </th><th>2007
        </th><th>2006
      </th></tr></thead><tbody>
       <tr>
        <th>Net sales
        </th><td>$ 32,479
        </td><td>$ 24,006
        </td><td>$ 19,315
       </td></tr><tr>
        <th>Cost of sales
        </th><td>21,334
        </td><td>15,852
        </td><td>13,717
      </td></tr></tbody><tbody>
       <tr>
        <th>Gross margin
        </th><td>$ 11,145
        </td><td>$  8,154
        </td><td>$  5,598
      </td></tr></tbody><tfoot>
       <tr>
        <th>Gross margin percentage
        </th><td>34.3%
        </td><td>34.0%
        </td><td>29.0%
     </td></tr></tfoot></table>
     <hr>
     <p>The following shows how one might mark up the operating expenses table from lower on the same
  page of that document:</p>
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
  <span class="nt">&lt;colgroup&gt;</span> <span class="nt">&lt;col&gt;</span>
  <span class="nt">&lt;colgroup&gt;</span> <span class="nt">&lt;col&gt;</span> <span class="nt">&lt;col&gt;</span> <span class="nt">&lt;col&gt;</span>
  <span class="nt">&lt;thead&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th&gt;</span> <span class="nt">&lt;th&gt;</span>2008 <span class="nt">&lt;th&gt;</span>2007 <span class="nt">&lt;th&gt;</span>2006
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">rowgroup</span><span class="nt">&gt;</span> Research and development
        <span class="nt">&lt;td&gt;</span> $ 1,109 <span class="nt">&lt;td&gt;</span> $ 782 <span class="nt">&lt;td&gt;</span> $ 712
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">row</span><span class="nt">&gt;</span> Percentage of net sales
        <span class="nt">&lt;td&gt;</span> 3.4% <span class="nt">&lt;td&gt;</span> 3.3% <span class="nt">&lt;td&gt;</span> 3.7%
  <span class="nt">&lt;tbody&gt;</span>
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">rowgroup</span><span class="nt">&gt;</span> Selling, general, and administrative
        <span class="nt">&lt;td&gt;</span> $ 3,761 <span class="nt">&lt;td&gt;</span> $ 2,963 <span class="nt">&lt;td&gt;</span> $ 2,433
  <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">row</span><span class="nt">&gt;</span> Percentage of net sales
        <span class="nt">&lt;td&gt;</span> 11.6% <span class="nt">&lt;td&gt;</span> 12.3% <span class="nt">&lt;td&gt;</span> 12.6%
<span class="nt">&lt;/table&gt;</span>
</pre>
     <p>This table could look like this:</p>
     <table class="apple-table-examples e2">
      <thead>
       <tr>
        <th>
        </th><th>2008 
        </th><th>2007 
        </th><th>2006 
      </th></tr></thead><tbody>
       <tr>
        <th scope="rowgroup"> Research and development 
        </th><td> $ 1,109 
        </td><td> $ 782 
        </td><td> $ 712 
       </td></tr><tr>
        <th scope="row"> Percentage of net sales 
        </th><td> 3.4% 
        </td><td> 3.3% 
        </td><td> 3.7% 
      </td></tr></tbody><tbody>
       <tr>
        <th scope="rowgroup"> Selling, general, and administrative 
        </th><td> $ 3,761 
        </td><td> $ 2,963 
        </td><td> $ 2,433 
       </td></tr><tr>
        <th scope="row"> Percentage of net sales 
        </th><td> 11.6% 
        </td><td> 12.3% 
        </td><td> 12.6% 
     </td></tr></tbody></table>
    </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="links.html#links"><span class="secno">4.8</span> <span class="content">Links</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="sec-forms.html#sec-forms"><span class="secno">4.10</span> <span class="content"><span>Forms</span></span></a> →</p></body></html>
